Browser developer tools
The developer tools in your browser help you examine, edit, and debug the HTML, CSS, and JavaScript code on the page on which you run your application. With these tools, you can also inspect which assets the page requested and how long they loaded.
Supported browsers
The developer tools are part of every modern web browser. The suite of developer tools depends on the browser in which you run your application.For the list of recommended browsers that Pega Platform supports, see Pega Platform Client Operating System and Browser Support.
Core developer tools
You can find the most popular tools that give you the best insight into page resources and their properties on the following tabs of the developer tools header:
- Elements (Chrome) or Inspector (Mozilla Firefox)
- The developer tools usually open by default on a tab with a DOM explorer
and CSS editor. Use the tool to see how the HTML code on your page looks
at run time, and to view the CSS styles of each element on the page. You
can also use the inspection tool to modify the HTML and CSS code, and to
instantly preview your changes.
For example, you can modify the CSS style for the background color or spacing between elements, and then see the result of your changes live in the browser.
- Console
- The console runs JavaScript on the page that the browser currently
displays, and reports any errors that the browser encounters when
running the scripts. Use the tool to monitor JavaScript errors and
warnings that the web page logs.
For example, you can find a failed authentication warning in the logs.
- Network
- The tool shows the network requests from the client when a page is
loaded. Use the tab to diagnose the timing of individual requests and
inspect the request properties.
For example, you can check the status code of requests.
Previous topic Using PAL Next topic Tools for testing the UI