JavaScript And Debug

JavaScript & Debug2013-08-23 @uupaa

Debugging Functions

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

• try ~ catch

• window.onerror = function(){}

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

• about:debug, about:about

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

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

debugger ステートメント

about:debug

• Android Browser のアドレスバーに

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

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

Debugging Tools

Debugging Tools

Browser LocalInspector

RemoteInspector weinre Fiddler

Charles($50)

Fire Mobile Simulator

-- ◯ -- -- --

-- -- ◯ -- -- --

-- ◯ -- -- --

◯ -- -- ◯ ◯ ◯

◯ -- -- -- ◯ --

◯ -- -- ◯ ◯ --

DevTool Functions

Browser Remote Inspector

JavaScriptDebugger Timeline Profile Resource

Proxy

◯ RemoteInspector

RemoteInspector

RemoteInspector ×

× × × × ×

◯ RemoteInspector

RemoteInspector

RemoteInspector

RemoteInspector

-- ◎ ◎ ◎ ◎

-- ◯ ◯ ◯ ×

-- ◯ ◯ ◯ ×

Remote Inspector

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

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

• Connect to USB

• Mac Safari→ Develop Menu→ iPhone5→ WebPage

Remote Inspector

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

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

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

Setting (3/3)• Inspect Remote Web Page

うまく接続できないときは• 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

Tips

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

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

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

• Google.search(“Chrome Stable”)

• Google.search(“Chrome Canary”)

Tips

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

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

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

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

Tips

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

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