UI of the Console Tool
The tool provides various option related to the logs that are being displayed, lets move left to right and understand these options.
Console sidebar
You can view the logs as categories of there types using the console sidebar which can be shown or be hidden using the sidebar button. This sidebar helps to quickly look at only the specific types of logs such as errors or warnings. The categories can also be expanded to select the file and view only the logs of that file.
Clear console
You can clear the console completely using this option. This helps to clean console so that you may work on typing the JS code. You can also use the shortcut key “Ctrl+L” to clear the console.
JavaScript context
You are provide with a drop-down list of various frames used in the browser which when selected allows the JS code to work on that selected frame. This is done to because the JS code that you type in the console tab will work on only the selected frame.
Create live expression
You may check a JS expression regularly and may have to type the expression whenever you want to check and also the console can get very untidy, to solve this problem you can add the expression as live expression. Live expression are pinned expression whose values regularly gets updated and you don’t have to type the expression multiple times. Select the eye option and type the expression in the text input that appears and then press enter to add the live expression.
Filter
You can filter the logs by typing the characters or using regular expression. This helps you to search specific characters in the logs for quick and easy viewing. The regular expression must be between two slashes ( / ).
Log level
You can filter the logs using the drop-down list with respect to there types such as errors, warnings and info. If sidebar is displayed then this drop-down list is greyed out and can’t be used.
Displaying Number of Issues
The no. of issues in the site is displayed in the top of the console which indicates possible improvements that can be done to the webpage. On click it the issues tab gets opened in the drawer of the DevTools.
Console Settings
The settings provide various options that can be enabled or disable in the console tool such as Group similar message, Autocomplete from history, hide network messages etc.
Console Tool in Microsoft Edge Browser
The Console tool is used to check JS errors and warnings but it can also be used to manipulate the JS of the webpage. The tool can also be used alongside with other DevTools as by default it is present in the drawer of the DevTools.