GOOGLE CHROME SCRIPT DEBUGGER HOW TO
GOOGLE CHROME SCRIPT DEBUGGER CODE

I want to catch the functionality when the button is clicked and click event has been trigged.ĭevTools will pause the code after the button is clicked. * Event Listener Breakpoints → Mouse → click The easy way to track the code is by using Event Listener Breakpoints (check the picture below)

Let's presume the script.js is a big file and contains hundreds lines of code. * Go to Sources Panel and check if the file script.js exist

In the DevTools my goal is to find the function responsible for the clicking of the button Click to SumUp My settings are: right side & mobile responsive view, I would like to make the website responsive in mobile view to get everything in one screen.

GOOGLE CHROME SCRIPT DEBUGGER HOW TO

Let’s start debugging, I open my developer toolbar with the keyboard shortcuts Command+Option+J (MAC) or Control+Shift+J (Windows, Linux)Ĭustomize and Arrange the DevTools panel: In case you don`t know how to customize click here When clicking Click to SumUp button, the sum of inputs will be displayed. Imagine that we have created a straightforward interactive application that results in the sum of two numbers: Number 1 and Number 2. Let’s take a very simple instance on our way of debugging. Debugging in JavaScript code on a real example For debugging we need to investigate a scenario with and existing bug as shown in the picture below.ġ.For demonstration reasons, I already created a GitHub repository ( click here) where you could easily find the code used in this article.PS: If you are already an advanced developer and got quite familiar with code debugging on JavaScript, skip Part 1 and go straight to Part 2 Requirements * Inject JavaScript code using feature Snippets from Chrome DevTools * Debugging in JavaScript code on a real example To demonstrate I will split the tutorial into two parts: And here goes the solution that I would happily share it with you. Then I became even more ambitious: I wanted to test the function on the same page where I was working on, so I had to find a way to debug it. I landed on a page where I discovered the function but simultaneously I wanted to test the code and understand how is it working (debugging). Two days ago I was searching to find a solution for an algorithm problem. It shows a new way of code injections and gives you the possibility to not jump into the editor. Debugging JavaScript code with Chrome Devtools and add more code in the existing page while debugging.

Google chrome script debugger