来源于:https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

The Command Line API contains a collection of convenience functions for performing common tasks: selecting and inspecting DOM elements, displaying data in readable format, stopping and starting the profiler, and monitoring DOM events.

Note: This API is only available from within the console itself. You cannot access the Command Line API from scripts on the page.

$_

$_ returns the value of the most recently evaluated expression.

In the following example, a simple expression (2 + 2) is evaluated. The $_ property is then evaluated, which contains the same value:

In the next example, the evaluated expression initially contains an array of names. Evaluating $_.length to find the length of the array, the value stored in $_ changes to become the latest evaluated expression, 4:

$0 - $4

The $0$1$2$3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel. $0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on.

In the following example, an element with the class medium is selected in the Elements panel. In the Console drawer, $0 has been evaluated and displays the same element:

The image below shows a different element selected in the same page. The $0 now refers to newly selected element, while $1 returns the previously selected one:

$(selector)

$(selector) returns the reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector() function.

The following example returns a reference to the first <img> element in the document:

Right-click on the returned result and select 'Reveal in Elements Panel' to find it in the DOM, or 'Scroll in to View' to show it on the page.

The following example returns a reference to the currently selected element and displays its src property:

Note: If you are using a library such as jQuery that uses $, this functionality will be overwritten, and $will correspond to that library's implementation.

$$(selector)

$$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().

The following example uses $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

 
    var images = $$('img');
    for (each in images) {
        console.log(images[each].src);
    }

Note: Press Shift + Enter in the console to start a new line without executing the script.

$x(path)

$x(path) returns an array of DOM elements that match the given XPath expression.

For example, the following returns all the <p> elements on the page:

 
    $x("//p")

The following example returns all the <p> elements that contain <a> elements:

 
    $x("//p[a]")

clear()

clear() clears the console of its history.

 
    clear();

copy(object)

copy(object) copies a string representation of the specified object to the clipboard.

 
    copy($0);

debug(function)

When the specified function is called, the debugger is invoked and breaks inside the function on the Sources panel allowing to step through the code and debug it.

 
    debug(getData);

Use undebug(fn) to stop breaking on the function, or use the UI to disable all breakpoints.

For more information on breakpoints, see Debug with Breakpoints.

dir(object)

dir(object) displays an object-style listing of all the specified object's properties. This method is an alias for the Console API's console.dir() method.

The following example shows the difference between evaluating document.body directly in the command line, and using dir() to display the same element:

 
    document.body;
    dir(document.body);

For more information, see the console.dir() entry in the Console API.

dirxml(object)

dirxml(object) prints an XML representation of the specified object, as seen in the Elements tab. This method is equivalent to the console.dirxml() method.

inspect(object/function)

inspect(object/function) opens and selects the specified element or object in the appropriate panel: either the Elements panel for DOM elements or the Profiles panel for JavaScript heap objects.

The following example opens the document.body in the Elements panel:

 
    inspect(document.body);

When passing a function to inspect, the function opens the document up in the Sources panel for you to inspect.

getEventListeners(object)

getEventListeners(object) returns the event listeners registered on the specified object. The return value is an object that contains an array for each registered event type ("click" or "keydown", for example). The members of each array are objects that describe the listener registered for each type. For example, the following lists all the event listeners registered on the document object:

 
    getEventListeners(document);

If more than one listener is registered on the specified object, then the array contains a member for each listener. In the following example, there are two event listeners registered on the #scrollingList element for the "mousedown" event:

You can further expand each of these objects to explore their properties:

keys(object)

keys(object) returns an array containing the names of the properties belonging to the specified object. To get the associated values of the same properties, use values().

For example, suppose your application defined the following object:

 
    var player1 = { "name": "Ted", "level": 42 }

Assuming player1 was defined in the global namespace (for simplicity), typing keys(player1)and values(player1) in the console results in the following:

monitor(function)

When the function specified is called, a message is logged to the console that indicates the function name along with the arguments that are passed to the function when it was called.

 
    function sum(x, y) {
        return x + y;
    }
    monitor(sum);

Use unmonitor(function) to cease monitoring.

monitorEvents(object[, events])

When one of the specified events occurs on the specified object, the Event object is logged to the console. You can specify a single event to monitor, an array of events, or one of the generic events "types" mapped to a predefined collection of events. See examples below.

The following monitors all resize events on the window object.

 
    monitorEvents(window, "resize");

The following defines an array to monitor both "resize" and "scroll" events on the window object:

 
    monitorEvents(window, ["resize", "scroll"])

You can also specify one of the available event "types", strings that map to predefined sets of events. The table below lists the available event types and their associated event mappings:

Event type & Corresponding mapped events
mouse "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key "keydown", "keyup", "keypress", "textInput"
touch "touchstart", "touchmove", "touchend", "touchcancel"
control "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

For example, the following uses the "key" event type all corresponding key events on an input text field currently selected in the Elements panel.

 
    monitorEvents($0, "key");

Below is sample output after typing a characters in the text field:

profile([name]) and profileEnd([name])

profile() starts a JavaScript CPU profiling session with an optional name. profileEnd()completes the profile and displays the results in the Profile panel. (See also Speed Up JavaScript Execution.)

To start profiling:

 
    profile("My profile")

To stop profiling and display the results in the Profiles panel:

 
    profileEnd("My profile")

Profiles can also be nested. For example, this will work in any order:

 
    profile('A');
    profile('B');
    profileEnd('A');
    profileEnd('B');

Result in the profiles panel:

Note: Multiple CPU profiles can operate at once and you aren't required to close them out in creation order.

table(data[, columns])

Log object data with table formatting by passing in a data object in with optional column headings. For example, to display a list of names using a table in the console, you would do:

 
    var names = {
        0: { firstName: "John", lastName: "Smith" },
        1: { firstName: "Jane", lastName: "Doe" }
    };
    table(names);

undebug(function)

undebug(function) stops the debugging of the specified function so that when the function is called, the debugger is no longer invoked.

 
    undebug(getData);

unmonitor(function)

unmonitor(function) stops the monitoring of the specified function. This is used in concert with monitor(fn).

 
    unmonitor(getData);

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) stops monitoring events for the specified object and events. For example, the following stops all event monitoring on the window object:

 
    unmonitorEvents(window);

You can also selectively stop monitoring specific events on an object. For example, the following code starts monitoring all mouse events on the currently selected element, and then stops monitoring "mousemove" events (perhaps to reduce noise in the console output):

 
    monitorEvents($0, "mouse");
    unmonitorEvents($0, "mousemove");

values(object)

values(object) returns an array containing the values of all properties belonging to the specified object.

 
    values(object);

Chrome-Console( Command Line API Reference)的更多相关文章

  1. Chrome console & Command Line API

    Chrome console & Command Line API $ && $$ querySelector querySelectorAll Command Line AP ...

  2. 如何在Windows下开发Python:在cmd下运行Python脚本+如何使用Python Shell(command line模式和GUI模式)+如何使用Python IDE

    http://www.crifan.com/how_to_do_python_development_under_windows_environment/ 本文目的 希望对于,如何在Windows下, ...

  3. mysql 乱码问题(程序界面显示正常,mysql command line显示乱码)

    今天用java写一个程序,用的是mysql数据库.界面出现乱码,然后写了一个过滤器结果了乱码问题. 但是,当我在mysql command line 中查询数据的时候,在界面上显示正常的数据,在mys ...

  4. Java 9 揭秘(12. Process API 更新)

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: Process API是什么 如何创建本地进程 如何获取新进程的信息 如何获取当前进程的信息 如何获取所有系统进程的信息 如何设置创建,查 ...

  5. Java 9 揭秘(13. Collection API 更新)

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: 在JDK 9之前如何创建了不可变的list,set和map以及使用它们的问题. 如何使用JDK 9中的List接口的of()静态工厂方法创 ...

  6. 获取bing图片并自动设置为电脑桌面背景(使用 URLDownloadToFile API函数)

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  7. Python -- Scrapy 命令行工具(command line tools)

    结合scrapy 官方文档,进行学习,并整理了部分自己学习实践的内容 Scrapy是通过 scrapy 命令行工具进行控制的. 这里我们称之为 “Scrapy tool” 以用来和子命令进行区分. 对 ...

  8. Spring-boot在windows上安装CLI(Command Line Interface)的步骤!

    首先去下载安装包,我这里整了一个zip包,一个tar包,下载地址:https://github.com/zhangyawei117/Spring-boot-CLI.git 下载完了之后,把zip包解压 ...

  9. 使用python(command line)出现的ImportError: No module named 'xxx'问题

    当你在python.exe直接输入 import test 时报出importerror: no module named 'test' ,这个错误时由于路径问题,sys并没有找到你输入的这个文件 解 ...

随机推荐

  1. centos 6.0用yum安装中文输入法

    Centos6.2代码 CentOS 6.0没有默认没有装语言支持(Language Support),因此很不方面. 终于发现了有效的方法: su root yum install "@C ...

  2. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  3. android中的回调请求的个人理解

    Fragment类提供了管理"选项菜单"的回调函数onCreateOptionMenu(Menu,MenuInflater),调用它可以--创建"选项菜单". ...

  4. iOS程序破解——class-dump获取头文件

    原文在此:http://www.cnblogs.com/mddblog/p/4942894.html 一.简述 class-dump顾名思义,是用来dump目标对象class信息的工具.它根据oc的r ...

  5. C语言关于利用sscanf实现字符串相加减

    #include<stdio.h>#include<string.h>void main(){ int a; int b; char str1[10] = "9999 ...

  6. windows下用QTwebkit解析html

    环境 windows7 + VS2010 + QT5.2_opengl 配置开发环境 1.安装VS2010 2.安装QT 5.2 QT网站:http://qt-project.org/download ...

  7. SSRS Reports 2008性能优化案例二

    前几天一同事反映海外工厂A的SSRS报表比较慢,让我检查优化一下.于是我检查了下2015-07-13到2015-07-15 12:00这段时间报表的耗时记录 USE [ReportServer];   ...

  8. 使用memadmin可视化监视我们的memcache

    相信还是有很多项目使用memcache,可能有些人说有点out了,但是呢??? 项目上的东西不是你想换就能换的...谁都想多一事不如少 一事,大面积更换之后所面临的未知风险可能让你无法承受,但是呢, ...

  9. jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

    我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...

  10. 0023 Java学习笔记-面向对象-初始化代码块

    初始化代码块 在18篇-类的基本要素中说到,类的三大成员:成员变量.构造方法.方法,初始化代码块是类的第4个成员 初始化块用于对类或者对象的初始化, 一个类的初始化块可以有0-多个,按先后顺序执行 跟 ...