18
JavaScript & Debug 2013-08-23 @uupaa

JavaScript And Debug

  • Upload
    uupaa

  • View
    976

  • Download
    1

Embed Size (px)

DESCRIPTION

JavaScript And Debug

Citation preview

Page 1: JavaScript And Debug

JavaScript & Debug2013-08-23 @uupaa

Page 2: JavaScript And Debug

Debugging Functions

Page 3: JavaScript And Debug

• debugger; 条件付きブレークポイント

• try ~ catch

• window.onerror = function(){}

• alert(), console.log(), console.dir()

• about:debug, about:about

Page 4: JavaScript And Debug

• ソースコードに debugger; と書き、開発者ツールを開きつつ実行すると、その行で実行が一時停止する

• debugger; を一時的に無効化するにはBreakPoint 機能をOFFにする

debugger ステートメント

Page 5: JavaScript And Debug

about:debug

• Android Browser のアドレスバーに

about:debug とタイプすると、console.log が見れる機種もある

• Google.search(“about:debug Android”)

Page 6: JavaScript And Debug

Debugging Tools

Page 7: JavaScript And Debug

Debugging Tools

Browser LocalInspector

RemoteInspector weinre Fiddler

Charles($50)

Fire Mobile Simulator

-- ◯ -- -- --

-- -- ◯ -- -- --

-- ◯ -- -- --

◯ -- -- ◯ ◯ ◯

◯ -- -- -- ◯ --

◯ -- -- ◯ ◯ --

Page 8: JavaScript And Debug

DevTool Functions

Browser Remote Inspector

JavaScriptDebugger Timeline Profile Resource

Proxy

◯ RemoteInspector

RemoteInspector

RemoteInspector ×

× × × × ×

◯ RemoteInspector

RemoteInspector

RemoteInspector

RemoteInspector

-- ◎ ◎ ◎ ◎

-- ◯ ◯ ◯ ×

-- ◯ ◯ ◯ ×

Page 9: JavaScript And Debug

Remote Inspector

表示中のページをMacからリモートデバッグ

Page 10: JavaScript And Debug

Setting• iPhone→ Settings → Safari→ Advanced→ Web Inspector [ON]

• Connect to USB

• Mac Safari→ Develop Menu→ iPhone5→ WebPage

Page 11: JavaScript And Debug

Remote Inspector

表示中のページをMacからリモートデバッグ

Page 12: JavaScript And Debug

Setting (1/3)• Settings→ Developer options→ USB Debugging [ON]

• Settings→ Developer tools→ Enable USB Web debugging

• Restart Chrome Process

Android version tap x 3Build number tap x 7

Page 13: JavaScript And Debug

Setting (2/3)

• Install ADBPlugin (Chrome Extension)

• https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage

• Connect to USB

• Reload WebPage

• Start ADB & View Inspactor

• Start ADB• View Inspection Targets

Page 14: JavaScript And Debug

Setting (3/3)• Inspect Remote Web Page

Page 15: JavaScript And Debug

うまく接続できないときは• Chrome for AndroidのUSB DebugをONに

• Chrome を再起動

• Android のUSB DebugをONに

• Stop ADB (先にADBを止める)

• Reload WebPage (必ずページをリロードする)

• Start ADB (バッジが表示されるまで待機)

• View Inspection target, and Click “inspect” link

Page 16: JavaScript And Debug

Tips

• Chrome Stable と Chrome Canary は同時にインストールが可能

• Stableは安定版。Canaryは先進機能のお試し版

• 両方インストールすると開発が捗る

• Google.search(“Chrome Stable”)

• Google.search(“Chrome Canary”)

Page 17: JavaScript And Debug

Tips

• DDMSを使うとconsole.logが見れる

• DDMS(Android SDK)はインストールに時間がかかるので、事前にしておくと良い

• 魔改造ブラウザのソースコードも入手可能• 端末のソースコードは公開されていたりする

• Google.search(“arrows android ソースコード”);

Page 18: JavaScript And Debug

Tips

• Apple Developerに登録($99/年)すると、最新の Xcode, iOS, Safari が試用可能に

• iOS beta をインストールしたいなら登録が必要