Debugging JavaScript in Google Chrome

Debugging JavaScript in Google Chrome

Fabian Galinski 17. June 2014 Expert Topics

0 Comments // Reading Time: 2 min.

Since I noticed at the last TYPO3Camp Stuttgart that many developers don't know that you can debug JavaScript in Google Chrome and Safari, I want to share this knowledge with you here.

Basically you can open the debugger in Chrome with the key combination "Ctrl + Shift + J", alternatively you go to "Tools", "JavaScript-Console" in the menu. In this console you can directly execute JavaScript, e.g. alert("Hello World!");

You can also set breakpoints in the javascripts which are listed under the "Sources" tab. To do this, you have to click on the line number after opening a script. As soon as you activate the script, for example by clicking a button that calls the function, or by reloading the whole page, it will stop at the position of the breakpoint. From this point you can access the JavaScript in the console, which is loaded until then. Below is an explanation of the controls that allow debugging JavaScript:

Pause (F8)

This stops the script at the next JavaScript function and allows debugging at this point.

Resume (F9)

Keeps the JavaScript running and stops at the next breakpoint. Only available if JavaScript is already stopped.

Step over (F10)

Skips a function call and goes directly to the next line.

Step into (F11)

Jumps to a function call.

Step out (Shift + F11)

Jumps out of a function and returns to the calling function.

Deactivate / Activate Breakpoints

Activates or deactivates the breakpoints.

Pause on exceptions

Stops the JavaScript if an uncaught error occurs and jumps to the line where it happened. In addition, there is a checkbox which initiates a stop in case of intercepted errors.

Matching this article there is another video on our YouTube channel. I hope that this article and the video will help many developers and that in the future you will be able to solve simple bugs or create JavaScript faster. 


Do you want to talk to web development specialists at eye level?

 


Contact us!

We are a digital agency headquartered in Munich/Unterföhring, which works remotely worldwide. We are specialized in the development of digital products. Our core topics are websites and portals with TYPO3, eCommerce with Shopware and Android and iOS-Apps. In addition, we deal with many other topics in the field of web development. Feel free to contact us with your concerns!


0 Comments

No comments.
    Drop files here