Browser Development Tools
Built-in Browser Development tools that assist with creating and troubleshooting UI
What are Browser Developer Tools?
Each browser has its own set of developer tools. The general belief is that developer tools can be rated in this order:
- Chrome (https://developers.google.com/web/tools/chrome-devtools/)
- Firefox (https://developer.mozilla.org/en-US/docs/Tools)
- Microsoft Edge (https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide)
The basics are generally the same, as we will review below, and you can usually open them by right-clicking on your page and selecting Inspect Element. If you are going to work on UI or form development, though, it might be useful to go through the documentation for the browser you want to use the most.
This ability to test code can be as important as the ability to see errors. Particularly when combined with the sources tab and breakpoints. If you have stopped at a breakpoint, your console will be at that point and you will have access to all those local variables.
The network tab will show you all the calls made by/from this page. This will allow you to see the responses to your ajax calls. It will also allow you to see the exact headers and bodys you are sending as well as the exact responses you are getting back for errors.
Debugjs is a function built into the Kinetic product so you can more effectively debug. When the Kinetic files are served, they are (for effeciency) minified into one js and one css file (core.combined.js & core.combined.css). These files are basically impossible to read and it can be difficult to figure out what is going on. So, to help out, you can add ?debugjs to the end of your url to the server and it will break these apart and serve the actual sources instead of the minified sources. This can help you identify line numbers of failures and track that back to the cause, and so forth.
Note: This is the end of the url to the server. If you are using a React theme, you have a URL to the server and then a # and then a client side component of the URL. The ?debugjs would go before the # like this:
Updated 28 days ago