Upload
uupaa
View
976
Download
1
Embed Size (px)
DESCRIPTION
JavaScript And Debug
Citation preview
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 をインストールしたいなら登録が必要