Advanced JS Debugging - Githubissues

jaredwilli commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

"inlive values"

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

jaredwilli commented 9 years ago

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

paulirish commented 9 years ago

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 commented 9 years ago

+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 notifications@github.com 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 commented 9 years ago

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 mkearney@google.com 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 notifications@github.com 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 commented 9 years ago

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

Introduce symptoms of an issue the developer may notice which requires the given guide to diagnose.
Preface the guide by providing an example document set to work along with.
Set your mind back to, "I just kinda know the basics" and explain things as a fresh person looking at the tools.
Begin writing in the order of steps needed to do sub-tasks that work towards getting the symptoms discovered and then fixed.
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.

GoogleChrome / devtools-docs

Advanced JS Debugging #259