Advanced JS Debugging

[jaredwilli]

Looking over our open issues many of them fall into pro-level features for debugging.

We're moving our content to Web Fundamentals and that means we need to author things in their style.. It's more driven by action rather than overview of the feature set.

What do you think about a "JS Debugging for Professionals" guide.

• Stepping behavior
• Step into Async / async breakpoints
• promises pane
• v8's better error messages
• Break on first statement
• workers in main window
• live error script reporting
• sourceURL along with
• Blackboxing
• stuff from umar's advanced guide

[Garbee]

sgtm. I have discussing task-based docs on the list to talk about today. I'll at this to that as a reference for discussion.

[paulirish]

• "inlive values"

https://twitter.com/kangax/status/581141432142041088 https://code.google.com/p/chromium/issues/detail?id=467338

[jaredwilli]

Doc WIP https://docs.google.com/document/d/1NUaro1qO6uymlhxE46tcrqKJ-NDdkiPw3a7myttgAIc/edit

[paulirish]

The key challenge is writing this as user tasks not as feature overviews.

@jaredwilli i had some ideas around using some dev interview questions as a way of structuring this content. would you mind grabbing that from the IRC log and dropping them in here?

[Meggin]

+1 to the challenge of writing the docs as user tasks and not feature overviews.

Looking forward to seeing these ideas. I was on offsite/vacation, so I missed the last two IRC chats.

I did, however, get through restructuring of Debugging JavaScript docs TOC based on tasks-- it's a start:

Debugging Your JavaScript https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.xdjl59tu2ko

Using Breakpoints https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.56xvbpqkauf4

Different types of breakpoints and when to use them https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.p7n3j8k74kmh

Breakpoint on a line of code https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.stxc6ufen0au

Breakpoint on a DOM mutation event https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.jsmzc9efqfur

Breakpoint on an XMLHttpRequest https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.uxcazlsa2t40

Breakpoint on a JavaScript Event Listener https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.81c3w3yok7uo

How to add or remove breakpoints https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.mmtzfkhof1fj

How to step through the code https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.36xu748sfaao

Breakpoints reference https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.xc7wxoon9h7g

Log Diagnostic Information to the Console https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.74954ajdibyo

How to use the Console UI https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.toe0ccrixvsg

Writing to the Console https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.kf2vb71ricac

Viewing structured data https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.myvklri3luyb

Measuring execution times https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.lgureif54tkj

Counting statement executions https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.jfai1ekmxueo

Console API Reference https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.mi84cybc1bkp

Enter Commands that Interact with the Document https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.h0o3nj50oxf4

Evaluating expressions https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.ewv2do5x03ca

Monitoring events https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.pvc66weo7pnf

Controlling the CPU Profiler https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.96ftne7qinzk

Command Line API Reference https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.enmsut8wr0ly

JavaScript Readability https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.spyl327nht9j

Using PrettyPrint https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.r1e0plepd14d

Using Source Maps https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.d8m1gb0ndph

Exception and Error handling https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.ip10kb3qnle7

Tracking Exceptions https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.vamt7jhw0jcp

Handling Exceptions at Runtime https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.2mj73nwuttor

On Fri, Apr 3, 2015 at 12:37 PM, Paul Irish [email protected] wrote:

The key challenge is writing this as user tasks not as feature overviews.

@jaredwilli https://github.com/jaredwilli i had some ideas around using some dev interview questions as a way of structuring this content. would you mind grabbing that from the IRC log and dropping them in here?

— Reply to this email directly or view it on GitHub https://github.com/GoogleChrome/devtools-docs/issues/259#issuecomment-89401257 .

[Meggin]

And I've already changed something! Moved CPU profiling into performance, but still need to work out detailed mappings.

On Fri, Apr 3, 2015 at 12:49 PM, Meggin Kearney [email protected] wrote:

+1 to the challenge of writing the docs as user tasks and not feature overviews.

Looking forward to seeing these ideas. I was on offsite/vacation, so I missed the last two IRC chats.

I did, however, get through restructuring of Debugging JavaScript docs TOC based on tasks-- it's a start:

Debugging Your JavaScript https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.xdjl59tu2ko

Using Breakpoints https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.56xvbpqkauf4

Different types of breakpoints and when to use them https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.p7n3j8k74kmh

Breakpoint on a line of code https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.stxc6ufen0au

Breakpoint on a DOM mutation event https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.jsmzc9efqfur

Breakpoint on an XMLHttpRequest https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.uxcazlsa2t40

Breakpoint on a JavaScript Event Listener https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.81c3w3yok7uo

How to add or remove breakpoints https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.mmtzfkhof1fj

How to step through the code https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.36xu748sfaao

Breakpoints reference https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.xc7wxoon9h7g

Log Diagnostic Information to the Console https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.74954ajdibyo

How to use the Console UI https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.toe0ccrixvsg

Writing to the Console https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.kf2vb71ricac

Viewing structured data https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.myvklri3luyb

Measuring execution times https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.lgureif54tkj

Counting statement executions https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.jfai1ekmxueo

Console API Reference https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.mi84cybc1bkp

Enter Commands that Interact with the Document https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.h0o3nj50oxf4

Evaluating expressions https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.ewv2do5x03ca

Monitoring events https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.pvc66weo7pnf

Controlling the CPU Profiler https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.96ftne7qinzk

Command Line API Reference https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.enmsut8wr0ly

JavaScript Readability https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.spyl327nht9j

Using PrettyPrint https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.r1e0plepd14d

Using Source Maps https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.d8m1gb0ndph

Exception and Error handling https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.ip10kb3qnle7

Tracking Exceptions https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.vamt7jhw0jcp

Handling Exceptions at Runtime https://docs.google.com/document/d/1mdZsAxQoQP3SkL4x1O-wnS8PZL1wAL4HzUOxWlYUGPk/edit#heading=h.2mj73nwuttor

On Fri, Apr 3, 2015 at 12:37 PM, Paul Irish [email protected] wrote:

The key challenge is writing this as user tasks not as feature overviews.

@jaredwilli https://github.com/jaredwilli i had some ideas around using some dev interview questions as a way of structuring this content. would you mind grabbing that from the IRC log and dropping them in here?

— Reply to this email directly or view it on GitHub https://github.com/GoogleChrome/devtools-docs/issues/259#issuecomment-89401257 .

[Garbee]

I think something that would help with writing this is to handle it this way:

1. Introduce symptoms of an issue the developer may notice which requires the given guide to diagnose.
2. Preface the guide by providing an example document set to work along with.
3. Set your mind back to, "I just kinda know the basics" and explain things as a fresh person looking at the tools.
4. Begin writing in the order of steps needed to do sub-tasks that work towards getting the symptoms discovered and then fixed.
5. Retest to verify fixes are working as expected.

Repeat 3-5 for each new piece needed for solving a sub-task.

Does this sound like a reasonable process?

I think the "Who this guide is for" section is pretty off-putting and could limit the people who would read it. Things should be written encouraging anyone (with a basic understanding of JS itself) to be able to jump in and learn how to use the DevTools.