TSP Logo TSP Wiki
Docs
TSP Wiki

    Basics for Debugging with Browser Consoles

    Toggle pseudo-classes to trigger styling rules

    Some user’s interaction with HTML element would trigger extra styling rules (.e.g. hover on top of button makes the color changes, focus on an input makes it being highlighted). Modern browsers allow developer to trigger these behaviors via browser console.

    Guidances:

    Use responsive design mode to develop responsive interface

    To test how the interface looks like in different devices, the browser console allows to manipulate display screen size or even simulate different devices on the browser

    Guidances:

    Use computed styling to detect active styling rules

    More often than not, a component styling is a combination of different styling rules. The browser console supports highlights of current active styling rule, and where the rules come from via computed styling panel. Developer can use this to navigate and discover unwanted styling rules.

    Guidances:

    Use Console Panel to print out information for debugging

    console.log is a quick, ‘dirty` way to print out information for debugging. Developer can utilize this to get information in runtime in Console Panel of Browser Console

    DO: using console.log, console.info, console.warning and console.error to create layers of information. The browser console supports filters based on type of console messages

    DON’T: all debugging information has to be removed in production build. Most modern frameworks have configuration parameters to handle this, for example with Vite

    Filter requests in Network Panel for better information

    Network Panel is an important part of browser console - it shows to developer all requests and data received during runtime. However, sometimes developer only needs to see specific types of requests, e.g. XHR requests or JS files. Filtering them by categories is recommended in such situations

    Guidances:

    Manipulate Cache

    In development and debug, it is recommended to disable all caches to detect bottleneck when the website loads. The cache can be old HTML or JS files, or responses from APIs previously called.

    Guidances:

    Read and Manipulate Cookies and Session Storage data

    There are some use cases where you want to be able to manupulate cookies or session storage data

    • When you need to clear off current user’s session data to quickly logout
    • Observe size and information cached in session storage
    • Copy cookies info to use in other tool like Postman

    References

    Edit this page on Gitlab