Before the end of test development-the use of browser developer tools

Chrome Developer Tools is a built-in browser tool for viewing and debugging content and behavior related to web browsing. You can use the shortcut key Ctrl + Shift + J (Cmd + Opt + J on Mac) to open it. It is displayed at the bottom of the browser and contains the following Tab functions.

Console

Used to view logs and debug JavaScript scripts.

The above is the console of Baidu's homepage. You can find that the developer has printed a job posting in the form of a log.

In the last line at the bottom of the console, we can enter some JS commands to execute.

Elements element viewer

Display the HTML code of the current webpage. In the webpage, right-click a control and select Check to display the source code of the control; in the source code window, select the HTML of a control, the control will be highlighted in the webpage.

In the window at the bottom left, you can modify the source code of the webpage, and the page will automatically refresh after completion. The style sheet of the element is displayed on the right, which can be directly modified and previewed.

Sources source file viewer

Display all resources of the current webpage, including HTML, CSS, JS, pictures, etc. Select a JS file on the left and click the line number in the script on the right to set breakpoints for debugging. In addition, we can also click on the file name + line number on the right side of the message in the console of the first picture to jump to the specified location in the source code.

Network network request

Shows the time consumed by the loading of various resources in the webpage. Click the name of the resource at the bottom to select and highlight the file download progress bar corresponding to the corresponding color.

Application data

In the previous introduction of the network protocol , we know that the Session is maintained by sending the Cookie stored on the client to the server in subsequent requests. The figure above shows the following types of data that can be cached by the client.

• Cookie: Used for server-side client identification based on Session;
• Local Store: The size of the data cached in the local browser is basically unlimited;
• Session Store: Same as above, but the cached data is only valid in the same browser window/tab.

These are some of the content and related testing, use more help, refer to here W3Schools tutorial.

thematic directory