JavaScript And Debug

908 views
815 views

Published on

JavaScript And Debug

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
908
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript And Debug

  1. 1. JavaScript & Debug 2013-08-23 @uupaa
  2. 2. Debugging Functions
  3. 3. • debugger; 条件付きブレークポイント • try ~ catch • window.onerror = function(){} • alert(), console.log(), console.dir() • about:debug, about:about
  4. 4. • ソースコードに debugger; と書き、開発者 ツールを開きつつ実行すると、その行で 実行が一時停止する • debugger; を一時的に無効化するには BreakPoint 機能をOFFにする debugger ステートメント
  5. 5. about:debug • Android Browser のアドレスバーに about:debug とタイプすると、 console.log が見れる機種もある • Google.search(“about:debug Android”)
  6. 6. Debugging Tools
  7. 7. Debugging Tools Browser Local Inspector Remote Inspector weinre Fiddler Charles ($50) Fire Mobile Simulator -- ⃝ -- -- -- -- -- ⃝ -- -- -- -- ⃝ -- -- -- ⃝ -- -- ⃝ ⃝ ⃝ ⃝ -- -- -- ⃝ -- ⃝ -- -- ⃝ ⃝ --
  8. 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. 9. Remote Inspector 表示中のページをMacからリモートデバッグ
  10. 10. Setting • iPhone → Settings → Safari → Advanced → Web Inspector [ON] • Connect to USB • Mac Safari → Develop Menu → iPhone5 → WebPage
  11. 11. Remote Inspector 表示中のページをMacからリモートデバッグ
  12. 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. 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. 14. Setting (3/3) • Inspect Remote Web Page
  15. 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. 16. Tips • Chrome Stable と Chrome Canary は 同時にインストールが可能 • Stableは安定版。Canaryは先進機能のお試し版 • 両方インストールすると開発が る • Google.search(“Chrome Stable”) • Google.search(“Chrome Canary”)
  17. 17. Tips • DDMSを使うとconsole.logが見れる • DDMS(Android SDK)はインストールに時間がかかるの で、事前にしておくと良い • 魔改造ブラウザのソースコードも入手可能 • 端末のソースコードは公開されていたりする • Google.search(“arrows android ソースコード”);
  18. 18. Tips • Apple Developerに登録($99/年)すると、 最新の Xcode, iOS, Safari が試用可能に • iOS beta をインストールしたいなら 登録が必要

×