Chrome DevTools

The Sources Panel

About Me
About me

- Nashville Software School (NSS) cohort two

- Senior Front End Developer at Stratasan
- I love cats
Overview
Overview

- This talk is a deep dive

into the Sources panel of
Chrome DevTools
- Also intended to be
beginner friendly
- Outline
- Workspaces
- Breakpoints
- Source Code Navigation
- Sources Panel Side Panes
- Resources
A Simple App
Let’s Dive In!
Workspaces
Workspaces

- Save changes made in DevTools to

local copy of same file on your
computer
- No longer need to find file locally,
find line to change, and remember the
change to make - just change it as
you come across it
Make changes in a workspace
Create a workspace
See a file is connected in a workspace

- When a file is
correctly
connected in a
workspace, a green
dot will appear to
the left of the
file
See a file has changed in a workspace

- When a file is changed and is not saved in a workspace,

an asterisk will appear by the file name
See all workspace changes

- Right click on a file that has

been changed and select "Local
Modifications"

- Or you can right click on a

changed file within the
workspaces filesystem and
select "Local Modifications"
Undo workspace changes
Workspaces pro tip

- Don’t set up your folder

structure too deep - like a
repo with 3,000 files for
example
- It will cause the page to
freeze and you will lose
hours of your life debugging
this
Breakpoints
Breakpoints

- Pause JavaScript code execution

- Helpful for debugging
- Advantages over console.log()
- Do not have to know specific
variables to check
- Examine all values at a moment in
time
- No need to open your source code
- No need to reload page (if
breakpoint not just on page load)
Breakpoint
Kinds
Line-of-code breakpoints

- Click on a line number

- That line will turn blue
- The line will show up
under “Breakpoints” header
in right pane
- When rendering hits that
breakpoint, page will gray
out and code execution
will stop on that line
Conditional breakpoints

- Right click on a number to the left of a line of code

- Enter a condition that needs to be true for the
breakpoint to stop script execution
Conditional breakpoints

- This is like a JavaScript `if` statement with just the

text between the parenthesis
- Example in JavaScript:
- if (renderImage === true) { ... }
- note: just `renderImage` as the condition would work here as well
Conditional breakpoints example
DOM breakpoints

- The document object model (DOM) is the structure of a

markup language, like HTML or XML
- Also known as the DOM tree, since elements branch out
like a tree
- The markup of a page can be found in the Elements panel
Adding DOM breakpoints

- To add a DOM breakpoint:

- Go to Elements panel
- Right click on the element
where you want to watch for
changes
- Select “Break on”
- Select from three options
DOM breakpoint options

- Three options
- Node removal: triggered when selected element (node) removed
- Example: closing a modal that was dynamically added to page
- Attributes modifications: triggered when attribute added or removed
on selected element or when an attribute value changes
- Examples of HTML attributes: id, class, style, or title
- Example: an element that toggles a class styled to
`display: none`
- Subtree modifications: triggered when child of selected element
removed, added, or moved; not triggered on child node attribute
changes or on changes to selected parent node
- The next slide is an example of a subtree modification when an
image is added to page
DOM breakpoints example
DOM breakpoints example

- What is happening at the end of the previous example

Remove DOM breakpoints

- These breakpoints become

visible within the
Sources panel in the
“DOM Breakpoints” pane
- One or all of these
breakpoints can be
removed in that pane
Remove DOM breakpoints

- These breakpoints also are visible in the Elements panel

- To remove here, right click on the element and uncheck
the current breakpoint
Remove DOM breakpoints

- Also in the Elements panel, you can add a DOM Breakpoints

side pane to the right and right click to remove one or
all breakpoints
XHR breakpoints

- XMLHttpRequest (XHR) is
an application
programming interface
(API) in the form of an
object whose methods
transfer data between a
web browser and a web
server
- XHR objects can be seen
in the Network panel
Add XHR breakpoints

- Under the “XHR/fetch Breakpoints” pane, select plus sign

on right

- Enter the value that you want to look for in the URL and
hit enter

- Make sure the new breakpoint is checked

Add XHR breakpoints

- You can also set up a XHR breakpoint to look for any XHR
or fetch that happens
- Just add a XHR breakpoint and don’t enter a value for the
URL
XHR breakpoints example
XHR breakpoints example

- This is what the XHR object will look like in the Network
panel
- To see this, click on the XHR request to open the right
pane that has more information on the request
- Click on the Headers tab to see the request URL
Event breakpoints

- DOM events sent when

user interaction
happens
- Examples: mouse
clicks, submitting
forms, pressing keys
on keyboard
- Use to see what code
runs after an event
Exception breakpoints

- Icon:
- Exceptions, also called runtime errors, occur during
execution of a script
- Here, we are trying to log an undefined variable and get
an exception
Breakpoint Navigation
Breakpoint navigation

- Once code is paused,

there are several ways to
step through the code
Resume script execution

- Icon:
- Execute code until the next
breakpoint
- Example
- Breakpoints are on lines 7 and 14
- Code execution is stopped on line 7
- Resume script execution is chosen
- Execution will stop on the next
breakpoint on line 14
Resume script execution
Step over

- Icon:
- Execute a function without
stepping into it
- Example
- The only breakpoint is on line 2
- Code execution is stopped on line 2
- Step over is chosen
- functionA is called on line 2
- functionA on line 6 will run but will
not be paused on or within
- Execution will stop on next line
after the function it stepped over,
which is line 3
Step over
Step into

- Icon:
- Investigate the contents of a
function and go line by line
- Example
- The only breakpoint is on line 2
- Step into is chosen
- functionA is called on line 2
- functionA on line 6 will start
running
- Execution will stop on line 7
Step into
Step out of

- Icon:
- Execute the rest of a function
and stop on next breakpoint
- Example
- The only breakpoint is on line 7
- Code execution is stopped on line 7
- Step out of is chosen
- The rest of functionA will run, but
not pause on lines 8-13
- Execution will stop at next line
after the function that was stepped
out of
Step out of
Step?

- Icon:
- Seems to behave like stepping into a function (going
line by line)
Turn Off
Breakpoints
Turn off breakpoints options

- Right click over a breakpoint and select option

Remove breakpoints

- Remove breakpoint
- Removes the one breakpoint right clicked on
- Remove all breakpoints
- Removes all breakpoints (be careful with this and the next option!)
- Remove other breakpoints
- Removes all breakpoints except the one that was right clicked on
Disable and deactivate all breakpoints

- Disable all breakpoints

- Same as unchecking each item so it does not run
- Deactivate all breakpoints
- Leaves each item that is checked as checked, but prevents these
checked breakpoints from running
- Breakpoints will gray out
- Good for if you want to temporarily not run certain breakpoints
- Same as using the rectangle arrow icon shortcut at the top of the
pane
Disable individual breakpoints
Source Code
Navigation
File switching

- Mac: Cmd + P
- Windows/Linux: Ctrl + P
Go to line

- Mac: Cmd + G
- Windows/Linux: Ctrl + G
Search source code

- Mac:
Cmd + Opt + F
- Windows/Linux:
Ctrl + Shift + F
- Works for regular
expressions
(searching for a
pattern or sequence
of characters) and
quotes
Multi select

- Mac:
Cmd + click where to
enter text
- Windows/Linux:
Ctrl + click where to
enter text
Select occurrences and multi edit

- Click on word to edit

- Select occurrences
- Mac: Cmd + D
(for each occurance)
- Windows/Linux: Ctrl + D
(for each occurance)
- Replace text
Pretty print

- Make minimized code readable

Sources Panel
Side Panes
Watch

- Observe one or more variables of interest at different

points in time
- Helpful because, when looking at variables in files, you
have to hover over and sometimes expand to see values;
when hovering away, those expansions go away
- Note: You need to be using breakpoints to stop script
execution and see variables update
Watch
Watch - add and remove variables

- Add a watched variable

- Click plus sign in top right corner of watch pane

- Remove a watched variable

- Hover over variable and click minus sign in watch pane
Watch - pro tip

- Set up variables you need to

monitor often
- If using React, these could be
- `this`
- `this.props`
- `this.state`
Watch variables - refreshing

- If you want to play around with a variable in the console

to see what happens, the new variable value from the
console won't update in the watch pane unless you
manually refresh it
- Still not sure why this might be needed because the code
executes with the original variable ¯\_(ツ)_/¯
- To refresh a variable
- Click refresh icon in top right corner of watch pane
Watch variables - refreshing
Scope

- Scope in JavaScript refers to the part of a program where

a particular property (like a function or variable) is
accessible
- The Scope pane shows properties currently defined at the
local, closure, and global levels
- Here, you can view these properties and also double click
on a variable value to change it
- Good for identifying local variables and saves time
explicitly and manually adding them to the Watch pane
- Also helpful because you can see what is defined under
the mysterious `this` JavaScript keyword
Scope
Call Stack

- The Call Stack pane shows the order in which functions

are being called (call stack)
- The function at the top is the current and most recent
function called
Call Stack

- Three options when right clicking in Call Stack pane

- Restart frame
- Jumps back in time before execution of current function
- Useful for if you have stepped too far ahead
- Copy stack trace
- Same as console.trace()
- Copies information from the call stack pane
- Example use case is when there has been an error and you need to
share information with someone to help debug with you
- Blackbox script
- When stepping through code line by line, this prevents stepping
into a script file you are not interested in (like a third party
library for example)
Note on blackboxing

- In the settings of DevTools, you can also set up patterns

(like files that end in “min.js”) or entire folders to be
blackboxed
- https://developers.google.com/web/tools/chrome-devtools/javascript/re
ference
- Instructions:
- Open DevTools settings
- Go to Blackboxing tab
- Click add pattern button
- Enter script name or
regex pattern of script names
- Click add button
Another note on blackboxing

- You can see functions being called in blackboxed scripts

at any time by clicking “Show blackboxed frames”

- Blackboxed functions will show as italic and grayed out

Resources
Resources

- Various tips
- https://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tr
icks
- Breakpoints
- https://developers.google.com/web/tools/chrome-devtools/javascript/br
eakpoints
- Workspaces
- https://developers.google.com/web/tools/chrome-devtools/workspaces/
- How to use Chrome DevTools in Visual Studio Code
- https://www.sencha.com/blog/debugging-ext-js-applications-using-visua
l-studio-code-and-google-chrome/
Resources

- Scope
- https://medium.com/dailyjs/i-never-understood-javascript-closures-966
3703368e8
- Chrome DevTools on Twitter
- https://twitter.com/ChromeDevTools
Questions?
Thank you
and happy debugging!
Slides:
http://bit.ly/chromedevtoolssourcespanel

LinkedIn:
http://bit.ly/lisafrenchlinkedin

Twitter:
@lisafrench