Download to read offline
![Setting
• iPhone
→ Settings → Safari
→ Advanced
→ Web Inspector [ON]
• Connect to USB
• Mac Safari
→ Develop Menu
→ iPhone5
→ WebPage](https://image.slidesharecdn.com/javascriptanddebug-130824145829-phpapp01/85/JavaScript-And-Debug-10-320.jpg)
![Setting (1/3)
• Settings
→ Developer options
→ USB Debugging [ON]
• Settings
→ Developer tools
→ Enable USB Web debugging
• Restart Chrome Process
Android version tap x 3
Build number tap x 7](https://image.slidesharecdn.com/javascriptanddebug-130824145829-phpapp01/85/JavaScript-And-Debug-12-320.jpg)
JavaScript And Debug
- 1.
- 2.
- 3. • debugger; 条件付きブレークポイント •try ~ catch • window.onerror = function(){} • alert(), console.log(), console.dir() • about:debug, about:about
- 4. • ソースコードに debugger;と書き、開発者 ツールを開きつつ実行すると、その行で 実行が一時停止する • debugger; を一時的に無効化するには BreakPoint 機能をOFFにする debugger ステートメント
- 5. about:debug • Android Browserのアドレスバーに about:debug とタイプすると、 console.log が見れる機種もある • Google.search(“about:debug Android”)
- 6.
- 7. Debugging Tools Browser Local Inspector Remote Inspector weinre Fiddler Charles ($50) FireMobile Simulator -- ⃝ -- -- -- -- -- ⃝ -- -- -- -- ⃝ -- -- -- ⃝ -- -- ⃝ ⃝ ⃝ ⃝ -- -- -- ⃝ -- ⃝ -- -- ⃝ ⃝ --
- 8. DevTool Functions Browser Remote Inspector JavaScript Debugger Timeline Profile Resource Proxy ⃝ Remote Inspector Remote Inspector Remote Inspector× × × × × × ⃝ Remote Inspector Remote Inspector Remote Inspector Remote Inspector -- ◎ ◎ ◎ ◎ -- ⃝ ⃝ ⃝ × -- ⃝ ⃝ ⃝ ×
- 9.
- 10. Setting • iPhone → Settings→ Safari → Advanced → Web Inspector [ON] • Connect to USB • Mac Safari → Develop Menu → iPhone5 → WebPage
- 11.
- 12. Setting (1/3) • Settings →Developer options → USB Debugging [ON] • Settings → Developer tools → Enable USB Web debugging • Restart Chrome Process Android version tap x 3 Build number tap x 7
- 13. Setting (2/3) • InstallADBPlugin (Chrome Extension) • https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoaefidgiigpemgage • Connect to USB • Reload WebPage • Start ADB &View Inspactor • Start ADB • View Inspection Targets
- 14. Setting (3/3) • InspectRemote Web Page
- 15. うまく接続できないときは • Chrome forAndroidのUSB DebugをONに • Chrome を再起動 • Android のUSB DebugをONに • Stop ADB (先にADBを止める) • Reload WebPage (必ずページをリロードする) • Start ADB (バッジが表示されるまで待機) • View Inspection target, and Click “inspect” link
- 16. Tips • Chrome Stableと Chrome Canary は 同時にインストールが可能 • Stableは安定版。Canaryは先進機能のお試し版 • 両方インストールすると開発が る • Google.search(“Chrome Stable”) • Google.search(“Chrome Canary”)
- 17. Tips • DDMSを使うとconsole.logが見れる • DDMS(AndroidSDK)はインストールに時間がかかるの で、事前にしておくと良い • 魔改造ブラウザのソースコードも入手可能 • 端末のソースコードは公開されていたりする • Google.search(“arrows android ソースコード”);
- 18. Tips • Apple Developerに登録($99/年)すると、 最新のXcode, iOS, Safari が試用可能に • iOS beta をインストールしたいなら 登録が必要