Browser Development Tools

What are Browser Developer Tools?

When using a browser there are always developer tools available. These are tools that let you see into what is rendering the page, the HTML, the CSS, and the Javascript. This allows you to play with the look, put breakpoints in the code, see the line causing an error, etc. These are incredibly powerful tools for UI troubleshooting.

Each browser has its own set of developer tools. The general belief is that developer tools can be rated in this order:

1. Chrome (https://developers.google.com/web/tools/chrome-devtools/)
2. Firefox (https://developer.mozilla.org/en-US/docs/Tools)
3. 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.

Console Tab

The console tab is where you will see warnings and errors. Note that you can also type in javascript in here to test it. For example, if your form had a hidden field called Key you could type this into the console to find out the value of that field:
K('field[Key]').value();

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.

Sources Tab

The sources tab shows you all the javascript and css files loaded for this page. You can browse through them and set breakpoints if desired.

Network Tab

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

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:
https://kinetic.kinops.io/?debugjs#/kapps/queue/list/Mine