Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Debugging with Chrome DevTools [Part 1]

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Cassian LUP Cassian LUP
July 31, 2013
Programming
190
2

JavaScript Debugging with Chrome DevTools [Part 1]

A brief introduction in Chrome Developer Tools.

Avatar for Cassian LUP

Cassian LUP

July 31, 2013

More Decks by Cassian LUP

See All by Cassian LUP
Warping Time with Async/Await
Avatar for Cassian LUP cassilup
5
120
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
97
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
200
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
48
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
69
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
100
Appium • Mobile Automation Made Awesome (Part II)
Avatar for Cassian LUP cassilup
0
93
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
130
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
84

Other Decks in Programming

See All in Programming
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
2.5k
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
Avatar for TOMIKAWA Sotaro ssssota
3
1.7k
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
Avatar for izumin5210 izumin5210
2
1.3k
TSKaigi2026-静的解析への投資がAI時代のコード品質を支える ── カスタムESLintルールの設計と運用
Avatar for HayatoKudou hayatokudou
6
1.3k
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
210
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
1.7k
AIとRubyの静的型付け
Avatar for ukin0k0 ukin0k0
0
430
AIエージェントと協働するCLI開発 — BunとOpenClawで学んだこと
Avatar for よしこ yoshikouki
1
220
OSもどきOS
Avatar for Sora Arakawa arkw
0
280
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
320
oxlintはeslint/typescript-eslintを置き換えられるのか
Avatar for shoma-fujita shomafujita
2
290
TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践
Avatar for Har1101 har1101
6
1.2k

Featured

See All Featured
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
350
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
290
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
310
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.9k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
390
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
370
Done Done
Avatar for chrislema chrislema
186
16k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
130
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2k

Transcript

  1. None

  2. 0 ) C o m m o n - s

    e n s e ! c o n c e p t s . !

  3. there%is%[SIMPLY]% no%such%thing% as%a% bug$free$ app%

  4. learning% is%a%% ››%process%‹‹% ((not$ %% an%event%

  5. without% a%debugger% is%like% going%to%war.$

  6. without% a%debugger% is%like% going%to%war.$ Blindfolded.$

  7. 1 ) C h r o m e D e

    v T o o l s. ! B a s i c U s a g e . !

  8. Getting there:! % ›%%CTRL%+%SHIFT%+%J%%%%(COMMAND%+%OPTION%+%J)% % ›%%Right%Click%+%Inspect%Element% % ›%%Hotdog%Menu%(%%%%%%)%›%Tools%›%Developer%Tools%

  9. 2) HTML ! Elements ! Hands-on. ! [ “ H

    T M L ” , “ e l e m e n t s ” ] ! %

  10. [ “ H T M L ” , “ e

    l e m e n t s ” ] ! %

  11. 3) JS Console! Hands-on. ! [ “ J S ”

    , “ c o n s o l e ” ] ! %

  12. [ “ J S ” , “ c o n

    s o l e ” ] ! %

  13. 4) JS Sources! Hands-on. ! [ “ J S ”

    , “ s o u r c e s ” ] ! %

  14. [ “ J S ” , “ s o u

    r c e s ” ] ! %

  15. ! › Google: “[error keywords] js”! (Stack Overflow, forums etc.)!

    › https://developers.google.com/chrome-developer-tools/! › http://discover-devtools.codeschool.com/! › http://jsfiddle.net/! ! [ “ E n d i n g ” , “ t h o u g h t s ” ] ! %

  16. [ “ E n d i n g ” ,

    “ t h o u g h t s ” ] ! %