[Tips] use the console to learn and debug Javascript

1. What is console? Console is a separate window used to display JS and DOM object information. And inject a console object to Js. You can output information to the console window. 2. What browsers support console? Many people may know that chrome and Firefox support the console. Other browsers support Hold bad. For example, although the development tool provided by IE8 supports the console, its functions are monotonous and display objects. [Object, object], and you cannot click to view the attributes in the object. IE6 and IE7 can install the developer toolbar, Console is not supported. Both safari and Opera support the console, but there is no firebug or chrome convenience in use. Currently, firebug has released the firebuglite tool, which allows all browsers to support the console function and use firebug Almost the same. See http://getfirebug.com/firebuglite 3. Why not use alert or self-written log directly? When alert is used, the information can be displayed. Do you want to debug the program? The alert pop-up window will interrupt the program, If you want to display information in the loop, you are exhausted by clicking close window. In addition, the alert Display object is always displayed as [object]. Although the self-written log can display some object information, many functions do not support the console well. . (Some methods that compare chicken ribs are not listed, useRough blueMarked as a common method) 4. Console. Log (object [, object,...]) Console. log is the simplest method to output information to the console window. Multiple parameters are supported. These parameters are displayed together. e. g: Upload six days ago Download Attachment (6.5 KB) LogMethod The first parameter supports a string replacement mode similar to C-language printf. Log supports the following replacement modes: % S replace string % D instead of Integer % F replaces floating point value % O replaces object E. g: Upload six days ago Download Attachment (14.39 KB) 5. Console. debug, info, warn, error The four methods are the same as the LOG method, but the displayed icons and text colors are different. 6. Console. Assert (expression [, object,...]) The assert method is similar to the assert in unit test. When expression is false, the following information is output, e. g: Note: The assert method is not supported in firebuglite, and chrome and firebug are supported. 7. Console. Clear () This method clears all information in the console (not supported in chrome) Eight console. dirxml (node) Print the HTML code of the HTML element, which is equivalent to log. 9. Console. Trace () The trace method can view the call stack information of the current function, that is, how the current function is called. e. g: Upload six days ago Download Attachment (45.4 KB) 10 console. Group (object [, object,...]), groupcollapsed, groupend These three functions are used to group log and other output information for easy reading and viewing. The groupcollapsed method is the same as the group method, but the displayed group is collapsed by default. Eleven console. Time (name)/console. timeend (name) We often need to test the execution time of JS functions. We may write code in 1st statements and The last statement minus the current time. This set of functions actually implements this function. Time (name) creates a new one based on the name Timer. Timeend (name) stops the timer for a given name and displays the time. Twelve console. Profile (name)/console. profileend () This method is used to open the browser analyzer and analyze the JS execution between these functions, Note: firebuglite does not support profile. Chrome supports profile, but the analysis content is unknown. Thirteen console. Count ([title]) The count method is used to count how many times the current code has been executed. The title parameter can output additional titles before the number of times to help you read. E. g: Upload six days ago Download Attachment (9.26 KB) 14. Console. Table (data) The table method displays data objects in tables, which is useful when displaying arrays or JSON objects in the same format. Note: Table only supports firebug and is available only after firebug1.6 +. Summary: Console is a very good tool to help us learn and debug Js. If you have never used it before, use it now. You will find that it can help you save a lot of development time.