JavaScript Beautifier

JavaScript 文件在上线前一般都会压缩下,压缩的 JavaScript 几乎没有可读性,几乎无法设定断点。在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}),点击会将压缩 JavaScript 文件格式化缩进规整的文件,这时候在设定断点可读性就大大提高了。

查看元素绑定了哪些事件

在 Elements 面板,选中一个元素,然后在右侧的 Event Listeners 下面会按类型列出这个元素相关的事件,也就是在事件捕获和冒泡阶段会经过的这个节点的事件。在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件。

AJAX 时中断

 

在 Sources 面板右侧有个 XHR Breakpoints,点右侧的 + 会添加一个 XHR 断点, 断点是根据 XHR 的 URL 匹配中断的,如果不写匹配规则会在所有 AJAX,这个匹配只是简单的字符串查找,发送前中断,在中断后再在 Call Stack 中查看时那个地方发起的 AJAX 请求。

页面事件中断

除了给设定常规断点外,还可以在某一特定事件发生时中断(不针对元素),在 Sources 面板右侧,有个 Event Listener Breakpoints,这里列出了支持的所有事件,不仅 click,keyup 等事件,还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断),onload,scroll 等事件。

JavaScript 异常时中断

Pretty print 左侧的按钮是开启 JavaScript 抛异常时中断的开关, 有两种模式:在所有异常处中断,在未捕获的异常处中断。在异常处中断后就可以查看为什么抛出异常了。

DOM Level 3 Event 事件中断

在 Elements 面板,选中一个元素右键,有两个选项:Break on subtree modifications、Break on attributes modifications。这两个对应 DOM Level 3 Event 中的 DOMSubtreeModified,DOMSubtreeModified 事件 在 Sources 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断。

在所有资源中搜索

在 Chrome 开发者工具打开的情况下,按 Ctrl + Shift + F,则可以在所有资源中查找内容(其支持字符串和正则表达式两种形式)。

查找 JavaScript 文件

Ctrl + o  (在 Sources panel 下)。

查找 JavaScript 函数

Ctrl + Shift + o  (在 Sources panel 下)。

Command line API

● $(id_selector) //这个与页面是否有 jQuery 无关。

● $$(css_selector)

● $0, $1, $2, $3, $4 //Elements 面板中最近选中的 5 个元素,最后选择的是 $0。

● copy(str) //复制 str 到剪切板,在断点时复制变量时有用。

● monitorEvents(object[, types])/unmonitorEvents(object[, types]) //当 object 上 types 事件发生时在 Console 中输出 event 对象

更多 console api

更多 command line api

Console 中执行的代码可断点

在 Console 中输入代码的最后一行加上 //@ sourceURL=filename.js,会在 Scripts 面板中有个叫 filename.js 的文件,然后他就和外部 js 文件一样了。

控制台多行输入

Shift + Enter 即可换行。

chrome 开发人员工具的更多相关文章

  1. 不仅仅是浏览器 走近Chrome开发人员工具

    Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...

  2. EXT.NET高效开发(三)——使用Chrome浏览器的开发人员工具

    这篇帖子老少皆宜,不分男女,不分种族,不分职业.俗话说:“磨刀不误砍柴工”.掌握一些开发工具的使用,对自己帮助是很大的(无论是用于分析问题,还是提高生产力).本篇就讲述如何利用Chrome浏览器(这里 ...

  3. Chrome - 怎样独立窗口打开开发人员工具

    打开开发人员工具, 右上角找到下图红圈的键, 长按左键直到出现绿圈的键, 别松开鼠标, 把指针移到绿圈的键上面, 松开左键, 好了, 一个独立窗口粗线了. 转载请声明出处: http://www.cn ...

  4. 使用chrome的F12开发人员工具进行网页前端性能测试

    用chrome访问被测网站,定位到你要测试的动作所在页面或被测页面的前一页.按F12调出开发人员工具,其它的功能我就不介绍了,直接切换到性能选项卡Profiles. 点击start,生成ProFile ...

  5. IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html 在上一篇文章IE8“开发人员工具” ...

  6. IE8“开发人员工具”使用详解上(各级菜单详解)

    来源: http://www.cnblogs.com/JustinYoung/archive/2009/03/24/kaifarenyuangongju.html IE8“开发人员工具”使用详解上(各 ...

  7. Chrome_浏览器开发人员工具

    Google Chrome 浏览器开发人员工具,让网页开发变得更轻松 无论是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自带的 Dev ...

  8. IE开发人员工具教程

    写在前面 一直非常谷歌的控制台,因为我是做前端的,谷歌浏览器在我看来是解析JS最快的浏览器,所谓的熟能生巧,用熟悉了谷歌浏览器之后就特别喜欢用谷歌的控制台调试脚本.改变样式.查看HTML.查看资源加载 ...

  9. springboot开发人员工具(自动重启及相关的配置)

    导入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</groupId> ...

随机推荐

  1. php:sprintf

    十六进制 $hex = sprintf("%x",18); 输出:12(%x表示十六进制) $hex = sprintf("%4x",18); 输出:strin ...

  2. LR的VG与Control之间的关系,并发的实质

    LR的VG与Control之间的关系,经过无数次的实验,搞清楚了现实意义的并发.传说每秒有几百,几千,几万用户并发,基本属于设想状态. 在一秒内处理多少个请求,完全在于服务器处理能力的强弱.这里需要强 ...

  3. Windows环境下google protobuf入门

    我使用的是最新版本的protobuf(protobuf-2.6.1),编程工具使用VS2010.简单介绍下google protobuf: google protobuf 主要用于通讯,是google ...

  4. jsp提交表单问题

    以form形式提交的话 String usernameInForm = hreq.getParameter("username");String passwordInForm = ...

  5. JS学习之动态加载script和style样式

    前提:我们可以把一个网页里面的内容理解为一个XML或者说网页本身也就是一个XML文档,XML文档都有很特殊的象征:"标签"也叫"节点".我们都知道一个基本的网页 ...

  6. jQuery仿百度帖吧头部固定不随滚动条滚动效果

    <style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...

  7. JS-DOM元素灵活查找

    用className选择元素 封装成函数 <title>无标题文档</title> <script> /* window.onload=function () { ...

  8. Linux学习 -- Shell基础 -- Bash基本功能

    历史命令 history -c   clear -w   写入 ~/.bash_history 默认保存1000条, 可在/etc/profile中修改 调用 Tab补全 命令.目录.文件 命令别名 ...

  9. 转:Selenium借助AutoIt识别上传(下载)详解

    AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...

  10. 【linux系统学习】计算机硬件核心知识

    (一)企业里PC服务器品牌及型号 互联网公司服务器品牌:DELL,HP,IBM(百度):国内品牌:浪潮,联想,航天联志 DELL服务器品牌:1u = 4.45CM 2010年前 1u 1850,195 ...