Use console. table () to debug javascript and javascriptconsole

Use console. table () to debug javascript and javascriptconsole

Use CONSOLE. LOG () to display Arrays

Imagine that you have constructed the following Array
Var versions ages = [
{Name: "JavaScript", fileExtension: ". js "},
{Name: "TypeScript", fileExtension: ". ts "},
{Name: "CoffeeScript", fileExtension: ". coffee "}
];

console.log(languages);

Console. log () will display the array like this

This presentation is very useful for development, but I found that it is cumbersome to manually click each Object. At this time, I think console. table () is a bit interesting.

Use CONSOLE. TABLE () to display Arrays

Now we can use console. table () to try:

Very small and have wood?

Of course, console. table () is more suitable. Flat columns are made into table format data, and the display is more perfect. If you have no group, if each array element has a different structure, many of your tables are undefined.

Use CONSOLE. TABLE () to display objects

Another feature of console. table () is to display objects.

var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

Appropriate.

CONSOLE. TABLE () Filtering

If you want to restrict console. table () to display a column, you can input the following keyword list in the parameter:
// Multiple property keys
Console. table (ages, ["name", "paradigm"]);

If you want to access a property, one parameter is enough,

// A single property keyconsole.table(languages, "name");

I used to think that I have already understood the vast majority of Functions of Chrome Developer Tools, but now I am clearly wrong. Cool is okay to read the Chrome DevTools documentation!

How to debug javascript

In VS2005, debugging fails. In VS2008, there is a js debugging plug-in that inserts the plug-in into VS2008. debugging js Code is like debugging C # code, there are a total of three files. Just attach the DLL files to VS2008. If you are too lazy to find them online, please send me a copy of your mailbox.
PluginForJS. dll
PluginForJS. AddIn
Microsoft. JScript. Compiler. dll

Java... No, I'm a. net Programmer --!

By the way, FF browser has a firebug tool that can track and debug js

How to debug javascript

Currently, Common Browser IE, Chrome, and Firefox all have corresponding script debugging functions. Let's first look at IE:

1. debug in F12 Developer Tools
Open IE and press the F12 key to open the developer tool, which is a built-in developer development tool for IE, this allows developers to track, debug, and use HTML, CSS, Javascript, and other webpage resources.

If the page is not fixed at the bottom of the page, click the button in the menu bar in the upper right corner.

The tool window contains several tabs: HTML, CSS, console, script, probe, and network. Click each tab to execute the corresponding task.
In the HTML Tag window, the buttons in the toolbar perform the following operations:

CSS labels are used to view styles. The console displays various JS output information on the webpage, including error information and user logs. Open the script tab, which is what we want.

In the figure, I use a yellow rectangle to select a control. The drop-down list on the left is used to select a file, and the button on the right is used to start debugging. After you click Start debugging, the debugging program will maximize the window. in the selected file, locate the position to be debugged and click Add breakpoint on the left sidebar for debugging.

When a program runs at our breakpoint, You can debug it:

Here, we can use shortcut keys for operations. The common shortcut keys are as follows:
F9: Add/Remove breakpoints
F10: Process by process, that is, skip the methods and expressions in the statement.
F11: Statement-by-statement debugging, that is, one-step debugging, jumps into methods and expressions for statement-by-statement tracing debugging.

During execution, if we want to execute real-time code, we need to enter the code in the right pane and press Enter:

If you want to execute multiple lines of code, click the double arrow at the right of the run button to open the multiline mode. I will not film any more.

This method of debugging directly in the browser is also suitable for Google Chrome and FireFox FireDebug, but it is somewhat different on the bottom of the branch, and the main functions are the same.
Press the F12 key to enter the developer tool. You can view the source code, style, and js:

Click the Scripts button to open the debugging window, which contains the script file source code on the webpage. click the button on the left to open the side window of the selected file.

2. Use the debugger keyword for debugging
This method is very simple. We only need to add the debugger keyword to the debugging, and when the browser runs this keyword, it will be interrupted:

After setting, you can use the debugger keyword for debugging. After such setting, we can also capture unexpected errors for tracking and debugging.