Update JavaScript Debugging

[addyosmani]

edit from paul: this is a massive bug thread. half of it is fixed but many issues raised by pearl are not. We'll keep this one open for now and will help guide a future js debugging tutorial.

https://developer.chrome.com/devtools/docs/javascript-debugging https://github.com/GoogleChrome/devtools-docs/blob/master/docs/javascript-debugging.html

---

---

---

There are a few different pieces that need to be updated for this doc. - [x] Screenshot refresh of all images (UI is out of date in all) - [ ] Fix demos (a few are no longer working, or external demos have changed) - [x] Update Source Maps section to reflect change in format - [ ] Add features which landed since the doc was first published - [ ] KBD styles

[paulirish]

Other things to cover in this update

• how you can change Sources panel layout for Editing/Debugging
• Debugging Workers
  • In the right side, expand the panel that says "Workers" Click "Pause on Startup"
  • Refresh the page.
  • An inspector will pop open for the worker. You can use the JS/Heap profiler Profiles tab as normal.
  • Click 'play' to unpause the worker.

probably a lot more than just this.

cmd / to do to comment/uncomment (like sublime)

[pearlchen-old]

I think @dr4b is tackling this page?

I read through it the day before and here's my first impression suggestions/thoughts/notes that can be actioned -- or not.

---

DevTools - JavaScript Debugging - suggestions:

Under "The Sources Panel"

• Turn the Sources panel intro into a walkthrough slideshow. (Less scrolling up and down. Less info all at once.)
• Remove list of keyboard commands and instead direct link to https://developers.google.com/chrome-developer-tools/docs/shortcuts#sources-panel

Under "Debugging With Breakpoints" > Workflow

• [ ] this section would be nice as a video walkthrough -- and then the text/images are extracted from the * video.
• [x] un-bold “debugging”
• [x] put space in-between "debugging" and "JavaScript"
• [x] un-bold "intentional" and instead make italics. (Is there a convention around bolding/italics? * Bolding seems more appropriate for highlighting UI elements like: the Sources panel.)
• [x] remove Control-Shift-I shortcut because that's only for Windows.
• [x] this section doesn't really say how (or what) file to open before getting into setting breakpoints.
• [x] clicking the blue tag --> **right-**clicking the blue tag (Fixed context of this paragraph)
• [x] "The breakpoint indicator menu has several options including "Continue to here", "Edit Breakpoint", * "Disable [] Breakpoint" and "Save As", which will save the file locally." --> Text needs updating to * match screenshot since [] options are not these anymore.
• [x] Instructions on setting a conditional statement is missing the "Edit Breakpoint..." selection after * right-[] clicking
• [x] "The tag cycles through its three states of active, inactive, and removed." <-- when?? (removed)
• [x] "Click the Pause button then interact with your page." <-- Why? What are we doing now? (Wasn't too * sure what [] this example was describing about the call stack since it paused on createEventHandler() )
• [x] Mention that ESC also hides the mini-console since there's no close button on this one.
• [x] The paragraph and image about a loop every 20ms and conditional statements seem like it should be * higher up. And why is "halt" in bold?

> Using Breakpoints

• ~~"select "script.js" from scripts drop-down" <-- where is the scripts drop down? And what page am I on? (Related: Cmd+0 would be useful here, or a Snippet?)~~
• ~~Actually this whole section is a bit confusing because it doesn't really say anything new, and when it does (e.g. "Hover over the source code to inspect local and global variables, function arguments etc."), it's would be nice to have examples back it up.~~
• [x] Nuked this section. It didn't say anything new that wasn't covered in a little bit higher.
• [x] Moved "Click the Continue button..." bullet to "Interact with paused breakpoints" section.

> Breakpoints in Dynamic JavaScript

• What will I learn in this section and what's "Dynamic JavaScript" and what's a real world example?
• "Load dynamic script" button doesn't work.
• What is the "scripts drop-down"?
• Wrap "eval" in and explain that's it's JavaScript's eval

> Pause on Next JavaScript Statement

• Since previous example didn't work (and it should indicate that it must, especially if you jump between headings), "Move your mouse over this section" doesn't do anything (or maybe it did once I couldn't get it to happen again. "this section" should be more clear as to what the mouse over target is.)
• Other error in console makes it hard to figure out what's going on: "Attr.specified is deprecated. Its value is always true. plusone.js?onload=devsite_plusoneLoaded:28"
• Should put a note about F8 on the shortcuts page (https://developers.google.com/chrome-developer-tools/docs/shortcuts) (On most Macs, you have to do FN+F8 otherwise iTunes launches)

> Pause on Exceptions

• There is now a "Pause On Caught Exceptions" checkbox that makes the example needing an update.
• Would be nice to see the JS code earlier on so I know what the "Raise exception!" button is doing (e.g. that there's a try-catch block -- it would refresh my memory as to what a caught/uncaught exceptions is.

> Pause on Uncaught Exceptions

• "switch to Pause on uncaught exceptions" <-- I think this UI changed so I don't think it needs to say anything about uncaught exceptions

Breakpoints on DOM Mutation Events

• get rid of line break between "panel" and "element"
• "Break on Subtree Modifications" --> should be "Break on..." > "Subtree Modifications"
• Indicate that they should click on "Append child" button
• (Needed?) Show full snippet of the code that will be executed since not all of it can be shown in the screenshot.

Breakpoints on JavaScript Event Listeners

• Seems to trail off considering all the previous examples before this section was interactive. How do I trigger the breakpoint here? I see code in the screenshot.
• Needs a line break after "Note: Following events are supported"

Live Editing

• "In Authoring And Workflow," <-- "In the Authoring And Development Workflow section," (section should be linked to, instead of bold.)
• "we discussed how to make changes to scripts in the Sources panel." <-- I didn't read this section so recap quickly here or axe this section if it's mentioned previously because I don't know how useful it is here?
• Link to "Google Closure hovercard demo" because it was so far up in the page.
• "open up "mouse.js""<-- I can't find this in the hover card demo source code
• "This allows you to saved changes from within the DevTools without having to leave your browser." <-- should add a note about persistence?

Exceptions

• Add additional line break between "using Chrome DevTools." and "Exception handling is"
• Note to get Chrome Canary is kind of random for this spot.

Tracking exceptions

• Remove keyboard shortcuts
• Describe what I'm seeing in the screenshot

Viewing exception stack trace

• Not exactly sure what's happening in this screenshot since I can't see all the code to reproduce it myself.
• And it's talking about the call stack in the Console area, right? (Not the other Call Stack area, under "Watch Expressions"?)

Pause on JavaScript exceptions

• Not exactly sure what's happening in this screenshot. I think it need a new screenshot due to the new UI for the stop button?

Printing stack traces

• "There are several ways of doing that." <-- then bullet point list them

Printing stack traces > Error.stack

• What am I looking at in this screenshot and how to reproduce?

Printing stack traces > console.trace()

• What kind of verb is "instrument"?
• Be more clear as to how/where it can be used.

Printing stack traces > console.assert()

• Wait, isn't this the same as "Viewing exception stack trace"'s screenshot?
• What's in the second parameter? (It's hidden, can't see)

Handling exceptions at runtime using window.onerror

• That 2nd sentence is super long. Don't know where the list actually starts.

Source Maps

• First sentence is long. Needs to be broken up.
• Link in "the magic of source maps" goes to a Google Doc. Is this all we have?
• "Source Maps are a generic mapping format (that are JSON-based)" --> "Source Maps are a generic (JSON-based) mapping format"
• "Of most relevance to us" --> "An an example of pre-processed and post-processed" (then fix grammar on the rest of the sentence)
• "The idea is when you build for production," <-- Get rid of "The idea is"
• I don't know what this screenshot is telling me.
• "Before you view the following real world implementation of Source Maps make sure you've enabled the Source Maps feature by clicking the settings cog in the dev tools panel and checking the "Enable source maps" option." <-- super long sentence
• "Take a look at the special build of the font dragr tool in Chrome" --> Same link or different one?
• Explain what I'm looking for (maybe even tell me that I should be looking at the Sources panel with the Source map feature on and off, because it's on by default in Canary. e.g. without it, there's only scripts.js, but with it on, there's a whole bunch of Angular folders.)

How do Source Maps work? (Admittedly I got pretty tired by the time I got here so I need to finish reading this section.)

Read more

• This section feels a bit lost. So many things about Source Maps but barely anything on anything else.

For this entire page

• consider how it can be scaffolded so it appeals to absolute newbies, to experts who are skimming. (e.g. require clicking to reveal additional content.)

[paulirish]

pearl, was there anything you think we were missing from this document? Also, sounds like its length was a problem for you, is there room to break this up or is it fine as a single piece?

[pearlchen-old]

@paulirish I'm still getting use to what's in all the docs (and what's available in DevTools) so I don't know what's missing or not.

I think there's room for breaking it up. Unless user stories already exists, it might be good to set up some time to go through some exercises to identify the most common user stories to figure out how to break up the page.

e.g.

• As an experienced JS app developer, I would like to step through lines of my code to find out how the app state is changing.
• As a UI developer, I would like to know why my DOM updates are not working

[pearlchen-old]

Also, would be nice to get some analytics on this page. e.g. What's the most linked to heading/anchor? Are the inline examples used? How long do people really spend on this page? How far do they even scroll?

[jaredwilli]

When you are broken in a loop, and you have 'myArray[i]' if you hover over myArray or over i, you will see the value of each separately, but if you highlight myArray[i] and then hover it, you will see the value of it at that index. - Protip

[jaredwilli]

Reference for js blackboxing on mdn site https://developer.mozilla.org/en-US/docs/Tools/Debugger search for blackboxing.