Intro to Google DevTools: Sources Panel
Tags: general
Published: 2020-09-23 13:52:45

---
title: Intro to Google DevTools: Sources Panel
published: true
date: 2020-06-23 14:36:16 UTC
tags: General
canonical_url: https://www.thisdot.co/blog/intro-to-google-devtools-sources-panel
---

 **Intro to Google DevTools: Sources Panel** Today's article will give an overview of the Sources panel in Google DevTools. The Sources panel allows you to easily debug and see what is going on with your code. First we’re going to cover some basics on how to use breakpoints. They are very useful and we’ll use them by going through a function call.

**Breakpoints** I’ll be using my old D&D site as an example here ([https://cst336huttfinalproj.herokuapp.com/index.php](https://cst336huttfinalproj.herokuapp.com/index.php)) and navigate to the Grand Heroes page.After that we’ll need to navigate to the Sources panel in Google DevTools. Once there you should select the grandheroes.php file and see some code in the window. Here we will now cover how to add, remove and toggle breakpoints on and off.

_Sources panel_ ![sourcepanel1-3](http://images.ctfassets.net/zojzzdop0fzx/7Ffq6ZZIMZ7MadLS88ylVv/aa4532a2fcb97509277256bbf0d048bb/sourcepanel1-3.png)

Adding breakpoints is fairly straightforward. On the Sources panel in the grandheroes.php file, you should see lines with numbers on them. All you have to do is click on those to which you would like to add your breakpoints.

_Adding a breakpoint_ ![sourcepanel2](http://images.ctfassets.net/zojzzdop0fzx/tohag5OKJIwrp5sbNWyCZ/f0d861c49c6138350b28d4364c08ae9d/sourcepanel2.png)

Removing breakpoints is just as easy. Looking at the same grandheroes.php file we should have some blue breakpoints (which now appear as red dots if you have the latest version of Chrome installed). All we have to do is now click on those blue breakpoints, and they will be removed. Another way of removing them is to go to the right side of the Sources panel, and open up the Breakpoints tab. From here, you can right click and select “Remove breakpoint” or “Remove all breakpoints”.

_Removing a breakpoint_ ![sourcepanel1-3](http://images.ctfassets.net/zojzzdop0fzx/7Ffq6ZZIMZ7MadLS88ylVv/aa4532a2fcb97509277256bbf0d048bb/sourcepanel1-3.png)

_Removing a breakpoint with Breakpoint tab_ ![sourcepanel4](http://images.ctfassets.net/zojzzdop0fzx/v049Akcwv7CPvUVEkUoDz/6da24c2eafd78030720d5d47097528ac/sourcepanel4.png)

Toggling breakpoints on and off is pretty straightforward. After selecting breakpoints on the grandheroes.php page again, we can navigate over to the Breakpoints tab on the right. From here, we can click on the check boxes to enable or disable a breakpoint. We can also right click on the Breakpoints tab, and choose “_Deactivate breakpoints_” or “_Disable all breakpoints_”. Finally, above the Breakpoints tab at the very top, you should see an arrow pointing to the right with a diagonal line through it. By clicking this arrow, you can also toggle the breakpoints on and off.

_Toggling a breakpoint from Breakpoints tab_ ![sourcepanel5](http://images.ctfassets.net/zojzzdop0fzx/5kWx8QyjNioZdjCLmKSs6Q/6e34f51be8d215a19e54e076b7906860/sourcepanel5.png)

_Toggling a breakpoint with the arrow_ ![sourcepanel6](http://images.ctfassets.net/zojzzdop0fzx/7lxGtoEYu6Af6DT1oK4PwN/df9bfef7f49ef30b3c27e1734b6d304b/sourcepanel6.png)

**Following a function call** So now that we know how to set, remove, and toggle breakpoints, we will be using them to follow a function call. We’ll start by making sure we’re on the Grand Heroes page ([https://cst336huttfinalproj.herokuapp.com/grandheroes.php](https://cst336huttfinalproj.herokuapp.com/grandheroes.php)), and then we'll open up our Sources panel. After that, we’ll navigate to the gandheroes.php file in the Sources panel, and click on line 63 and 65.

_Line 63 and 65_ ![debug1](http://images.ctfassets.net/zojzzdop0fzx/kvyi31E8cJNCIjs6gVivv/90522f30804b259591065bb28f55ae8c/debug1.png)

From here, we’ll click on the _1 Roll_ button, which will trigger our function call called _oneRoll()_. This should hit our first breakpoint on line 63, where we have an _if_ case. We can now verify that the _if_ case is true and the data does in fact have a length greater than 0.

_Breakpoint 1_ ![debug2](http://images.ctfassets.net/zojzzdop0fzx/6u817V1tfVYzXZTNh8Xa2w/8d77991833e443fe56c00b9ba8e37b53/debug2.png)

We’ll continue to the next breakpoint by resuming the script execution. You can do this by clicking F8 or the bar and right arrow symbol in the top right corner above the Watch tab. Here we can see that it enters the if case and will start to output the data.

_Breakpoint 2_ ![debug3](http://images.ctfassets.net/zojzzdop0fzx/7FV8BZulH8Mdke1Dp4RD9D/4222e1629b6b44375d0e03dc8d7885c8/debug3.png)

After seeing this, we’ll resume the script execution again, which will move us past our last breakpoint. We will see that the page has now updated with the information received from our function call.

_Data loaded from function call_ ![debug4](http://images.ctfassets.net/zojzzdop0fzx/sbsJkL0pTr9y3tXvohSyD/e5c7f5e42a64db59f0cdbf259010d086/debug4.png)

**Conclusion** Today's article covered an overview of the Sources panel in Google DevTools. Hopefully, after reading this, you will have learned something new and useful. I personally find the Sources panel to be extremely helpful. I use it daily for work, and it always helps me get through my code problems.

_This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit [thisdotlabs.com](https://www.thisdotlabs.com)._

_This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit [thisdot.co](https://www.thisdot.co)._