The Command Line API for Fun and Profit

Browser Developer Tool Command Line API: A powerful tool to improve development and debugging efficiency

This article explores the powerful command line API in browser developer tools, which provides a range of aliases, convenient functions and shortcuts to significantly improve the development and debugging experience.

Core points:

• The command line API allows developers to interact with web pages in the JavaScript console.
• API is limited to JavaScript console access and cannot be used for page scripts, but it is convenient to experiment with code snippets directly in the browser window.
• API provides a variety of functions for DOM exploration, object tracking, and console debugging, including $ ( document.querySelector alias), dir (list all the properties of the object), debug and monitor ( Set breakpoints and monitor function calls).
• Despite limitations (for example, not applicable to native methods or custom events), the command line API is a powerful tool for developers, significantly increasing efficiency and simplifying workflows.

The command line API contains a series of aliases, convenient functions and shortcuts that allow you to interact with web pages directly in the JavaScript console. This article will introduce some practical tools and their applications in improving the development and debugging experience.

You can access the browser's JavaScript console in a variety of ways. Usually press the F12 key and click the "Console" tab.

Before we go deeper, let's have a quiz: Do you know how to visualize an outline of CSS layout in your browser?

Answer: Only 108 bytes of code is required.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

As Addy Osmani, the creator of this concise code, said, this is a "twitter-sized debugger". You can try it now. Simply copy that line of code and paste it into the JavaScript console of your favorite developer tools (such as Chrome's DevTools, Firefox's Firebug, Opera's Dragonfly, Safari's Web Inspector, and even IE's F12 tools) (although IE only Support

series and $ objects). console

While the generation of color hexadecimal values ​​is impressive, I would like to make you pay more attention to the special ones. This is an alias for

and one of the many clever features in the command line API. Let's see what other features the API can provide. $$ document.querySelectorAllThe command line API is only available in the JavaScript console. You cannot serve the API to scripts on the page. But the benefit is that this gives you the opportunity to try all the code snippets for the rest of this article directly in the browser window. Simply open your JavaScript console and experiment.

DOM Exploration

If you are familiar with the jQuery library, you may have guessed what

does. As an alias for

, it returns a reference to the first DOM element that matches the given CSS selector. $

Let's see how to use it in the famous Cookie Clicker game. If you've never encountered this monotonous but strangely addictive game: You basically click on a big cookie to produce more baked goods and buy a variety of baking equipment. Then these devices will make more cookies…you get it.

Now, wouldn't it be great if we could have the console click on the cookies and give our hands and mouse a break? With just a little JavaScript and our new friend $, you can implement it with a simple line of code:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Although this is interesting, in some cases the DOM selection function of the command line API also has real value. You have learned about the power of $$ in the introduction of this article. As an alias for document.querySelectorAll, it returns an array containing all DOM elements that match the given CSS selector.

For example, we can use this function to extract all image sources of the website:

setInterval(function() { $("#bigCookie").click(); }, 10);

If you are looking for a specific element and want to double-check it, use inspect. For example, inspect(document.body) will take you directly to the body element in the Elements tab of the developer tool. (If you pass a JavaScript function to it, inspect also works - it will take you to the Source panel.)

Object Tracking

When I try to understand the prototype inheritance of JavaScript, I have a little assistant in the console: dir. When this method is called on an object, it displays a list of all properties of the object, including for example prototype and __proto__. This is just one of many scenes that come in handy. I found it conveniently view the properties of all objects. dir

If you are only interested in the direct properties of an object (i.e., properties that are not inherited from the prototype chain), you can use

and keys to get an array containing the name and the associated values, respectively. Try it: values

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}

Since objects are the most basic and ubiquitous data structures in JavaScript, I often use these functions to track object state.

Console debugging

The first thing I do whenever there is a problem with my website or application is to check the console for error messages. I've spent a lot of development time in the console. If so, you should be excited about functions like

and debug. They are just two examples of the powerful debugging tools provided by the command line API. (Unfortunately, Safari's Web Inspector does not support both functions.) monitor

debug(YourLibrary.someFunction)

This sets a breakpoint on the first line of the YourLibrary.someFunction function, and the debugger opens every time the function is called. Since I've been working in the console almost all the time, this is much faster than browsing the source code and setting breakpoints manually, especially when dealing with compressed code. To turn off this behavior, just call undebug to the same function.

If you don't want to call the debugger, but just get notified every time you call a specific function and what parameters to use, monitor is your friend.

The following code in the console:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

For example, once you call square, Chrome will notify you like this:

square(5); function square called with arguments: 5

Simply call unmonitor to the same function to stop monitoring. Note that monitor in Firebug only works with functions in page code.

The command line API also provides support for event debugging. getEventListeners Returns an object containing an array of each event type (such as "click" or "mousedown") registered for the specified object.

getEventListeners(document);

Going further, you can also use monitorEvents to get feedback in the console about whether the specified event is actually triggered. Continue to enter the following in the console:

monitorEvents(window, "resize");

After resizing the browser window, you will get feedback in the console along with the Event object for further inspection. Firebug adds a nice extra feature that even informs you which DOM elements are out of or overflowing the current viewport – which is very helpful for debugging responsive layouts.

You can also specify multiple events, and even select from the event type list:

monitorEvents(window, ["scroll", "mousedown"]); monitorEvents(document, "key");

See the command line API reference on Google Developers for the full list. You may not be surprised at that time that you can use unmonitorEvents to disable event monitoring.

Extra benefits for Chrome users

Sooner or later, the debugging function in the console will expose some shortcomings, including:

• debug and monitor do not apply to native methods
• monitorEventsNot applicable to custom events
• Missing features, such as interruption when object properties are accessed

Luckily, Amjad Masad solved these issues in his excellent Chrome extension Debug Utils (you can find the source code on Github).

How to use the command line API?

The command line API provides a series of useful and convenient functions for temporary evaluation of web pages and applications. Especially in my debugging workflow, it quickly replaced the entire console.log nightmare and became one of my favorite tools.

The JavaScript console is a powerful tool that you can now access in every major browser. Are you using it? If so, what are your favorite tips and tips?

(The FAQs part is omitted because it has weak correlation with the subject and is too long.)

The above is the detailed content of The Command Line API for Fun and Profit. For more information, please follow other related articles on the PHP Chinese website!