[General articles] chrome debugging skills

I. Introduction

Google Chrome is a free web browser developed by Google, which is characterized by fast speed, security, and ease of use. Its market share has ranked first in the world for a long time, and has been welcomed by a wide range of users and developers.

Chrome DevTools is a set of developer tools built into the Chrome browser designed to help developers debug and optimize websites and applications. It provides a series of powerful functions, including element inspection, network monitoring, performance analysis, JavaScript debugging, etc., which can help developers quickly locate and solve problems in websites or applications.

Here are some key features of Chrome DevTools:

1. Element inspection: DevTools allows developers to view and edit HTML, CSS, and JavaScript codes in the page, making it easy for developers to adjust styles and optimize layouts.
2. Network monitoring: DevTools can monitor web page network requests and responses, helping developers analyze web page loading performance and resource usage.
3. Performance analysis: DevTools has a variety of built-in performance analysis tools, such as timeline, CPU analyzer, memory analyzer, etc., to help developers identify and optimize web page performance bottlenecks.
4. JavaScript debugging: DevTools provides a powerful JavaScript debugging function, allowing developers to directly debug JavaScript code in the browser, and view variable values, stack information, etc.
5. Mobile device simulation: DevTools can simulate different mobile devices and network conditions, which is convenient for developers to test the performance of web pages on different devices and networks.

2. General articles

2.1 Address bar input

The Chrome browser supports a variety of chrome://-like commands that allow users to access some useful features and settings. Here are some common Chrome commands:

1. chrome://flags/: Visit the experimental features page of the Chrome browser to enable or disable some experimental features.
2. chrome://settings/: Visit the settings page of the Chrome browser, and you can modify various settings of the browser.
3. chrome://extensions/: Visit the extension management page of Chrome browser to manage installed extensions and applications.
4. chrome://history/: Visit the history page of the Chrome browser to view previously visited web pages.
5. chrome://downloads/: Visit the download page of Chrome browser to view and manage downloaded files.
6. chrome://bookmarks/: Visit the bookmark management page of Chrome browser to manage saved bookmarks.
7. chrome://newtab/: Open a new tab page of the Chrome browser, which can display frequently used websites, recently visited webpages and other information.
8. chrome://version/: View the version information, installation path, command line parameters, etc. of the Chrome browser.

It should be noted that these commands can only be used in the Chrome browser, other browsers may not support or have different commands. At the same time, the pages and functions accessed by these commands may change with the update of the Chrome browser version.

Documentation api : chrome://chrome-urls/

2.2 Duplicate elements

"Store as global" is a feature in Chrome DevTools that saves the currently selected variable or object as a global variable for easy use in the console or other JavaScript code.

save directly saves the error information as a .log file

2.3 Shortcut keys

• ctrl + shift + D to switch positions (usually from the starting position to the right position, but if it is the right position at the beginning, it will switch to the left position)
• ctrl + [ and ctrl + ] can switch panels left/right from the current panel

• addition and subtraction of values
• Lookup in elements, logs, sources & network
• All shortcut keys can be found in the settings

2.4 command

Overview: Provides a set of simple and easy-to-use methods for calling multiple commands encapsulated in DevTools, including long screenshots, theme switching, panel quick switching...

2.5 code block (snippet)

Overview: Chrome DevTools' snippet (snippet) is a feature that saves, edits, and executes snippets of JavaScript code. With code blocks, developers can easily test and debug code in DevTools without opening a new editor or console.

$$('div')
    .map(el => parseInt(el.innerText.length))
    .reduce((sum, value) => sum + value)