Shulou(Shulou.com)06/02 Report--

What is the use of Chrome-devtools, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Common shortcut keys

Use Cmd + Shift + C on Mac) Open the developer tool in review mode or open the lookup option if the developer tool is already open.

In the Source option, Cmd + o (Mac OS X) searches for files, and Cmd + Shift + o (Mac OS X) searches for a selection box for the corresponding function / specific selector in the file.

Cmd + L (Mac OS X) jumps to the specified line number.

To open the drawer console, you need to press the Esc key on the keyboard or click the Show Drawer button in the upper right corner of the developer tools window.

Snippets

Snippets is a new developer tool that can be used in this development process, which allows you to create, store, and execute JavaScript in the source panel.

Bookmarks all your bookmarks can be stored as fragments, especially those you might want to edit.

Utility debugging tools can interact with the current page and can be saved and debugged. A list of community projects has been provided.

Debugging Snippets provides a syntax highlighted and sustainable multiline console, which makes debugging code easier than a single line.

Monkey-patching code the code you want to fix at run time can be done through Snipptes, although most of the time you may just edit the code in real time in the source panel.

If you want to execute the code in some special lines of snippet in the console, you can select the code in the editor, then right-click and select the Evaluate in Console option to execute.

Console

Assertion

The console.assert () method displays an error message string (its second argument) only if its * * parameter is false.

In the following code, if the number of child nodes in the list exceeds 500, it will cause an error message in the console.

Example:

Console.assert (list.childNodes.length

500 ")

Results:

Output packet

You can group the associated output information together through the grouping command. The group command names your group with a string argument. The console will combine all the output information into one piece. To end the grouping, you just need to call groupEnd.

Sample code

Var user = "jsmith", authenticated = true, authorized = true; / / Top-level group console.group ("Authenticating user'% s'", user); if (authenticated) {console.log ("User'% s' was authenticated", user); / / Start nested group console.group ("Authorizing user'% s'", user); if (authorized) {console.log ("User'% s' was authorized.", user) } / / End nested group console.groupEnd ();} / / End top-level group console.groupEnd (); console.log ("A group-less log trace.")

Results:

Browse structured data

The table () method provides a simple way to view similar data objects. This will provide attributes to a data and create a header. The row data will be obtained from each index property value.

Sample code:

Console.table ([{a foo, b:false, c:undefined}]); console.table ([1, 2, 3], [2, 3, 4])

Results:

The second parameter in table () is optional. You can define any array of attribute strings you want to display.

A console output table that uses a collection of objects.

Sample code:

Function Person (firstName, lastName, age) {this.firstName = firstName; this.lastName = lastName; this.age = age;} var family = {}; family.mother = new Person ("Susan", "Doyle", 32); family.father = new Person ("John", "Doyle", 33); family.daughter = new Person ("Lily", "Doyle", 5); family.son = new Person ("Mike", "Doyle", 8) Console.table (family, ["firstName", "lastName", "age"])

Results:

Format DOM elements into JavaScript objects

When you want to record a DOM element in the console, it is displayed in XML format. It will be the same in the elements panel. To display information in JavaScript format, you can use the dir () method or replace your JavaScript with placeholders in log ().

Use the CSS style to change the console output form

The CSS format specifier can modify the style output in the console. Start with the text you want to modify with a placeholder, and then write the style you want to show in the second parameter.

Change the log style

Sample code:

Console.log ("% cThis will be formatted with large, blue text", "color: blue; font-size: x-large")

Results:

Computing time overhead

You can start a timer through the time () method. You must enter a string to identify the time mark. When you want to finish the calculation, use the timeEnd () method and pass the same string to the constructor. The console records the tag and the time spent at the end of the timeEnd () method.

Sample code and output about JavaScript execution time:

Sample code:

Console.time ("Array initialize"); var array= new Array (1000000); for (var I = array.length-1; I > = 0; Imuri -) {array [I] = new Object ();}; console.timeEnd ("Array initialize")

Results:

When the time () method is executing, a timeline record is generated and annotated. This is useful for tracking the use of applications and their sources.

Reverse lookup element

You can also right-click any element and click Reveal in Elements Panel so that you can find it in DOM.

Console Settin

You can modify four console settings in the general tab of the developer tool settings window.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.