Welcome again! This article is a short guide about how to debug JavaScript in Chrome developer tools. First of all, let me remind you what these developer tools are and why you should try to use them.
Sometimes, in the world of programming, it happens that the written code does not know why it refuses to work. In order to quickly find out what a code problem is and how to solve it effectively, you need to master a set of tools. Chrome DevTools is one of the most powerful web developer tools. It is built into the most popular browser today – Google Chrome.
Who will benefit from this? Anyone who is involved in web development and cares about its effectiveness. It is definitely a must-read for beginners. I am sure that every reader will be able to find something new and useful in this article, regardless of their experience in development.
My experience as a programmer began before the appearance of Chrome, and I became acquainted with DevTools gradually from the beginning of their creation. However, I learned about many possibilities of this tool while learning programming at the academy.
When you teach programming to beginners, you notice what may not be enough to complete the task effectively. Lack of experience, and therefore the lack of ready-made templates in the student’s mind that solve the task, often hinders it. But even when the student has guessed which approach to take, he may be surprised: the written code does not work as it should!
Chrome developer tools: a short overview
DevTools contain several tabs, and some of them I will analyze below. There are several ways to start working with the developer tools, and the most convenient one should be chosen depending on the situation:
- To explore an item on the page (in the Elements tab), right-click it, and select Inspect.
- You can use Ctrl + Shift + C or Command + Option + C (Mac) to quickly open the Elements tab without a specific selection.
How to debug JavaScript in Chrome developer tools
- To quickly get to the Console tab, press Ctrl + Shift + J or Command + Option + J (Mac). You can close DevTools with the same keyboard shortcut.
- You can adjust the tools by clicking three vertically placed dots in the upper right corner of their window (next to the cross). From the menu that appears, you can choose where to place DevTools: at the bottom of the page, you’re working on, in the left or right part of it, or in a separate window. You will probably have to switch between these options from time to time, because, depending on the placement of elements on the page and their size, having an opened toolbar may be uncomfortable in different places.
When the behavior of a page, functionality, or component seems strange, these debugging skills can help you to learn and to understand what went wrong and fix it.
There are several different approaches for activating the debugger in a JavaScript function:
- Add a debugger statement in the function declaration. Unfortunately, this is more difficult with the built-in functions of off-the-shelf components, since the source code is not always available.
- Call debug (link function) in the console. This is the same as adding a debugger statement; on the first line of the function declaration.
- Add breakpoints by line number that the Chrome debugger suggests. To do this, you can go to the code in the Sources panel and click on the line number. Left-clicking will add a breakpoint, and right-clicking will set a conditional breakpoint (will only work if this expression is true). Conditional breakpoints are very useful for debugging loops.
Little tricks about Debugging JavaScript
- JavaScript errors are logged to the console. Catching such errors is always a good idea, as they can degrade page performance or even break the interaction or functionality of the application.
- To see the file with the function in the “Sources” panel and highlight the line with its declaration, you can display the function in the console and click on it with the left mouse button. The same will happen if you right-click on the output function and select the Show function definition from the context menu.
How to debug JavaScript in Chrome developer tools
- Use the hotkeys F8 (resume), F10 (step over), and F11 (enter) while debugging.
- Right-click on a line of code and choose “Continue to here” – it’s like inserting a breakpoint, resume debugging, and immediately remove the breakpoint after it hits
- Right-click on the expression or selected text to bring up a context menu with the options Evaluate in the console and Add selected text to watches.
- Press the {} button to format the code in the source file.
Chrome DevTools is a really cool thing in programming, but, as an additional plus, I offer you in this article some secret websites that can be helpful when you want to debug your application.
Codepad
This service was created by Steven Hazel. Codepad is a unique web add-on, in which you can exchange the syntax of the code via the Internet. Furthermore, Codepad allows you to copy/paste important code fragments for social networking on the Internet.
JSBin
JSBin is a simple JavaScript console. At the heart of the robot’s bedroom, you can ask for special requests from the other vendors and write the code at once in real-time.
The interface can be tricky for beginners. The retailers have made a few online lessons, so you can follow their instructions. In the main view, you can choose between a number of JS libraries – jQuery, JQuery UI, jQM, Prototype, MooTools. You can add a custom product or save the code in the online store. The system has been pushed through for export and the code from the view of a clean template.
jsFiddle
The jsFiddle interface is heavily rendered from JSBin but has rather more folding functionality. Immediately, you can register an account and try to save the code on the Internet. jsFiddle will send a short URL, that you can share on the Internet via Twitter, Facebook, Navigate, Stack. But pay attention to the fact that you don’t need an account to start writing the code. It’s just a smart function, everything is in order.
How to debug JavaScript in Chrome developer tools
jsFiddle will also include libraries like Prototype and jQuery. You can include additional outside resources in JS / CSS files during the test. The application will be sent to XHR Ajax, so you can send the data back and forth between the server and the client’s browser.jsFiddle.
CodePen
CodePen is more similar to a social network for a web developer, not just a field for a code. Moreover, we can see, as people can share the code in HTML, CSS, and JavaScript, but we can also put “Like”, add a comment, open a collection or publish, make a phone call, send a web page of our website.
How to debug JavaScript in Chrome developer tools
CodeSandbox
Codesandbox is a JavaScript playground. In addition to running Vanilla JavaScript or infrastructure such as React.js, Vue.js, and Svelte, you can also run the running Node.js application. This means that you can define Node.js dependencies in the package.json file. Codesandbox will automatically download dependencies from NPM. It also provides access to the web terminal, so you can run any NPM script directly from the browser. Codesandbox.
WebMaker
WebMaker is a platform for HTML, CSS, JavaScript, and a preprocessor such as Sass, LESS, and JSX. WebMaker automatically compiles the syntax of these preprocessors so that the browser displays the code correctly. You can use a browser or install an extension in Chrome to work with the code offline. When you’re done experimenting with your code, you’ll be able to save your work locally, upload files, or share it in CodePen.
CSSDesk
Next, we move from the world of scripts to the language of styles – CSSDesk. You have the same settings as everyone else, with the source code on the left and the end page on the right. This web application is great for creating small web page templates and testing longer CSS3 properties with gradients and shadows.
The application also allows you to download the source code as a file to your computer. This can be a reliable replacement in situations where you are working on a laptop without any software. You can also create a short link URL to share online. Then other developers can come and edit what you have already created.
IDEOne
IDEOne is another tool based on deep programming and software development. Their online editor supports syntax highlighting for some very well-known languages. These include Objective-C, Java, C #, VB.NET, SQL, and dozens of others. What’s good about their application is that you can quickly debug many different programming languages on one page. You can also save the source code using a unique URL for sharing on the Internet.IDEOne.
SQL Fiddle
SQL Fiddle is practically the same as jsFiddle service, due to the syntax of the SQL database. All the data from your SQL code will appear in the tables before the editors. The database scheme is a SQL code, so you can save it, export the database, and reinstall everything on a new server. As long as you don’t know about databases or SQL, then you will not be able to do it.
Conclusion
So, I hope you know now how to debug JavaScript in Chrome developer tools or you can Hire Javascript Developer. Besides, you can also use this skill and try to debug your application with the help of one of the websites from the list.
