JavaScript And Debug

1. JavaScript & Debug
2013-08-23 @uupaa

2. Debugging Functions

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. Debugging Tools

7. Debugging Tools
Browser
Local
Inspector
Remote
Inspector
weinre Fiddler
Charles
($50)
Fire Mobile
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. Remote Inspector
表示中のページをMacからリモートデバッグ

10. Setting
• iPhone
→ Settings → Safari
→ Advanced
→ Web Inspector [ON]
• Connect to USB
• Mac Safari
→ Develop Menu
→ iPhone5
→ WebPage

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

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)
• 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

14. Setting (3/3)
• Inspect Remote Web Page

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

16. Tips
• Chrome Stable と Chrome Canary は
同時にインストールが可能
• Stableは安定版。Canaryは先進機能のお試し版
• 両方インストールすると開発が る
• Google.search(“Chrome Stable”)
• Google.search(“Chrome Canary”)

17. Tips
• DDMSを使うとconsole.logが見れる
• DDMS(Android SDK)はインストールに時間がかかるの
で、事前にしておくと良い
• 魔改造ブラウザのソースコードも入手可能
• 端末のソースコードは公開されていたりする
• Google.search(“arrows android ソースコード”);

18. Tips
• Apple Developerに登録($99/年)すると、
最新の Xcode, iOS, Safari が試用可能に
• iOS beta をインストールしたいなら
登録が必要