Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what Javascript debugging commands are except Console.log (). The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The Console object provides access to the browser console (such as Firefox's Web Console). It works differently in different browsers, but here are some of the interface features provided by Met.

The Console object can be accessed from any global object, such as Window,WorkerGlobalScope and special definitions provided through the property workbench.

It is defined as Window.Console by the browser and can also be called by a simple Console.

The most common method is Console.log (), which outputs content on the console. When I first started to learn the front end, I saw that everyone used Console.log (), and I hardly saw any other use of Console. Is it true that there is no other use of Console? After checking, it is found that Console is still very powerful, as to why it is rarely used may be because it has been deleted. Record other uses of Console here.

Note: because the Console object provides access to the browser console, the support and presentation may be different in different browsers, but only we developers can see the debugging content, so make sure that the development environment can use these methods. All the effects shown below are based on Chrome.

Classified output

Output of different categories of information

Console.log ('text message'); console.info ('prompt message'); console.warn ('warning message'); console.error ('error message')

Packet output

Use Console.group () and Console.groupEnd () to wrap the grouped content.

You can also use Console.groupCollapsed () instead of Console.group () to generate collapsed groups.

Console.group ('first group'); console.log ("1-1"); console.log ("1-2"); console.log ("1-3"); console.groupEnd (); console.group ('second group'); console.log ("2-1"); console.log ("2-2"); console.log ("2-3"); console.groupEnd ()

Console.group () can also be nested using the

Console.group ('first group'); console.group ("1-1"); console.group ("1-1-1"); console.log ('content'); console.groupEnd (); console.groupEnd (); console.group ("1-2"); console.log ('content'); console.groupEnd (); console.groupEnd (); console.groupCollapsed ('second group') Console.group ("2-1"); console.groupEnd (); console.group ("2-2"); console.groupEnd (); console.groupEnd ()

Table output

Use console.table () to output incoming objects, or arrays, in tabular form. Suitable for neatly arranged elements

Var Obj = {Obj1: {a: "aaa", b: "bbb", c: "ccc"}, Obj2: {a: "aaa", b: "bbb", c: "ccc"}, Obj3: {a: "aaa", b: "bbb", c: "ccc"}, Obj4: {a: "aaa", b: "bbb", c: "ccc"} console.table (Obj) Var Arr = [["aa", "bb", "cc"], ["dd", "ee", "ff"], ["gg", "hh", "ii"],] console.table (Arr)

View object

Use Console.dir () to display all the properties and methods of an object

Console.dir () and Console.log () have the same effect in Chrome

Var CodeDeer = {nema: 'CodeDeer', blog:' www.xluos.com',} console.log ("console.dir (CodeDeer)"); console.dir (CodeDeer); console.log ("console.log (CodeDeer)"); console.log (CodeDeer)

View Node

Use Console.dirxml () to display all the properties and methods of an object

Console.dirxml () and Console.log () have the same effect in Chrome

Node information of Baidu homepage logo

Conditional output

With console.assert (), conditional output can be done.

When the first parameter or return value is true, the content is not output. When the first parameter or return value is false, the following content is output and an exception is thrown

Console.assert (true, "you can never see me"); console.assert ((function () {return true;}) (), "you can never see me"); console.assert (false, "you can see me"); console.assert ((function () {return false;}) (), "you can see me")

Count output

Use Console.count () to output content and the number of times it is called

(function () {for (var I = 0; I < 3; iTunes +) {console.count ("number of runs:") ()

Trace the call stack

Use Console.trace () to track the process of the function being called. There are a lot of procedures to be called in complex projects. Use this command to help you figure it out.

Function add (a, b) {console.trace ("Add function"); return a + b;} function add3 (a, b) {return add2 (a, b);} function add2 (a, b) {return add1 (a, b);} function add1 (a, b) {return add (a, b);} var x = add3 (1,1)

Timing function

Use Console.time () and Console.timeEnd () to wrap the code snippet that needs to be timed, and output the event that runs this code.

The parameters in Console.time () are unique as the identification of the timer. Console.timeEnd () to end the timer for this identity and return the elapsed time in milliseconds. Run up to 10000 timers at the same time.

Console.time ("time of 1000 loops in Chrome"); for (var I = 0; I < 1000; iTunes +) {} console.timeEnd ("time of 1000 loops in Chrome")

Performance analysis.

Use Console.profile () and Console.profile () for performance analysis to see how long it takes for each part of the code to run, but I can't find where to view the analysis reports generated by these two methods in the debugging tools that come with Chrome. Other debugging tools should be needed.

Interesting Console.log ()

Finally, let's introduce the powerful Console.log (), which has many uses (for other output methods, such as error (), you can refer to log ()).

1. Prompt output

The objects and variables that can be output are preceded by prompts to increase the degree of recognition.

Var ans = 12345 console.log ("this is the value of the temporary variable ans:", ans)

II. Formatted output

Placeholder

Meaning s string output d or I integer output f floating point output o print javascript objects, which can be integers, strings, and JSON data

Example:

Var arr = [Xiao Ming "," Xiao Hong "]; console.log (" Welcome two new students% s and% s ", arr [0], arr [1]); console.log (" integer part of pi:% d, with decimal:% f ", 3.1415 pi 3.1415)

III. Custom style

Use% c to define styles for the printed content, and add% c before the output information, followed by the standard css style, you can add styles to the output information.

Console.log ("% cMy stylish message", "color: red; font-style: italic") Console.log ("% c3D Text", "text-shadow: 0 1px 0 # ccc,0 2px 0 # c9c9c9pime 0 3px 0 # bbb,0 4px 0 # b9b9b9b9b9b9) 0 5px 0 # aaa,0 6px 1px rgba), 0 5px rgba (0meme 0mine.1), 0 1px 3px rgba (0meme 0mine0min.3), 03px 5px rgba (0mine0mem.2), 0 5px 10px rgba (0mine0min.25), 010px 10px rgba (0mine0mine.2), 020px 20px rgba (0mine0mine0min.3). .15) Font-size:5em ") Console.log ('% cRainbow Text', 'background-image:-webkit-gradient (linear, left top, right top, color-stop (0, # f22), color-stop (0.15, # f2f), color-stop (0.3, # 22f), color-stop (0.45, # 2ff), color-stop (0.6, # 2f2), color-stop (0.75, # 2f2), color-stop (0.9, # ff2), color-stop (1, # f22)) Color:transparent;-webkit-background-clip: text;font-size:5em;'); console.log ('% cMy name is classicemi.', 'color: # fff; background: # f40; font-size: 24pxten')

These are all the contents of this article, "what are the Javascript debugging commands except Console.log ()?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.