图片 14

Chrome调试(转)

Google的debug平昔是个德文的,其实那一个对于有些前端开荒者来讲相比费力,其实用多了就习于旧贯了的。比起Firefox的firebug来讲依旧多少差别的,但是谷歌(Google卡塔尔国并吞内部存款和储蓄器远比FF小。所以理解好Google的debug依然必需的。假若你想更加深远的研究下,能够看下先前分享过一篇的随笔“前端开垦者调节和测量试验工具Chrome
Workspace”。好呢,上面是自家在天猫UED上观察的一篇随笔,讲的是关于Google的Chrome
developer tool调节和测量试验技术,如下:

来源:  
 谢谢我分享~~·

原稿地址:

  1. BeautifyJavascript

那篇作品是基于当下 chrome 稳固版(19.0.1084.52 m卡塔尔(قطر‎写的, 因为 google
也在持续善chrome developer tool, 所以 chrome 版本不相同恐怕稍迥然不一致.
一些飞速键也是 windows 上的, mac 下的应当背道而驰.

感觉写的很切合web开拓的新手

js 文件在上线前平常都会减削下, 压缩的 javascript 大概从未可读性,
差十分少无法设定断点. 在 Scripts 面板上边有个 Pretty print 按键,
点击会将核减 js 文件格式化缩进规整的文书,
当时在设定断点可读性就大大升高了.

常规的断点相关的
breakpoint/conditional-breakpoint/call-stack/watch-expressions
等就不涉及了.

Chrome 的开拓者工具分为 8 个大模块,每一种模块及其首要功能为:

  1. 查阅成分绑定了什么事件

1. Beautify Javascript

js 文件在上线前日常都会收缩下, 压缩的 javascript 大致从未可读性,
大约不恐怕设定断点. 在 Scripts 面板下边有个 Pretty print 按键(这种标志{}卡塔尔(قطر‎, 点击会将回退 js 文件格式化缩进规整的文书,
那时候在设定断点可读性就大大进步了.

图片 1

图片 2

  • Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 成分。
  • Network 标签页:用于查看 HTTP
    央浼的详细消息,如乞求头、响应头及重返内容等。
  • Source 标签页:用于查看和调节和测验当前页面所加载的本子的源文件。
  • TimeLine 标签页: 用于查看脚本的举办时间、页面成分渲染时间等音讯。
  • Profiles 标签页:用于查看 CPU 施行时间与内部存款和储蓄器占用等新闻。
  • Resource 标签页:用于查看当前页面所央求的财富文件,如 HTML,CSS
    样式文件等。
  • 奥迪(Audi卡塔尔ts 标签页:用于优化前端页面,加快网页加载速度等。
  • Console 标签页:用于显示脚本中所输出的调节和测量试验新闻,或运转测量检验脚本等。

在 Elements 面板, 选中叁个因素, 然后在左侧的 伊芙nt Listeners
下边会按类型出那些因素相关的风浪,
也正是在事变捕获和冒泡阶段会透过的这一个节点的事件.

2. 翻看成分绑定了什么样事件

在 Elements 面板, 选中贰个要素, 然后在右臂的 伊芙nt Listeners
上面会按类型出这一个因素相关的平地风波,
也正是在事变捕获和冒泡阶段会通过的那几个节点的事件.

在 Event Listeners 右边下拉按键中能够采用 Selected Node Only
只列出那一个节点上的事件

开展事件后会展现出那个事件是在哪个文件中绑定的,
点击文件名会直接跳到绑定事件管理函数所在行, 假设 js 是减掉了的, 能够先
Pretty print 下, 然后再查看绑定的事件.

图片 3

1.代码格式化

诚如景色下上线前 js 文件在都会回降一下, 压缩的 javascript
大致从不可读性, 差不离不可能设定断点. 在 Sourse
面板上面张开二个减少的js文件,会有个 Pretty print 开关(这种标识 {}卡塔尔国,
点击会将收缩 js 文件格式化, 方便设断点,进步可读性。

图片 4
图片 5

在 伊芙nt Listeners 左边下拉按键中得以筛选 Selected Node Only
只列出这么些节点上的风浪

3. Ajax 时中断

在 Scripts 面板侧边有个 XHEnclave Breakpoints, 点侧边的 + 会增多三个 xhr 断点,
断点是借助 xhr 的 url 匹配中断的, 倘使不写相称准则会在有着 ajax,
那么些相配只是简单的字符串查找, 发送前大头小尾, 在暂停后再在 Call Stack
中查阅时十一分地点倡导的 ajax 央求

2.查看成分绑定事件

在 Elements 面板, 选中三个要素, 然后在右臂的 Event Listeners
下边会按类型出那些成分相关的平地风波,
也正是在事件捕获和冒泡阶段会因而的那么些节点的事件.

在 Event Listeners 侧面下拉开关中得以选拔 Selected Node Only
只列出那一个节点上的事件

开展事件后会展现出那个事件是在哪个文件中绑定的,
点击文件名会直接跳到绑定事件管理函数所在行。

图片 6

展开事件后会展现出那么些事件是在哪个文件中绑定的,
点击文件名会直接跳到绑定事件管理函数所在行, 如若 js 是减少了的, 能够先
Pretty print 下, 然后再查看绑定的事件.

4. 页面事件中断

而外给设定常规断点外, 还足以在某一特定事件发生时行车制动器踏板(不针对成分卡塔尔 , 在
Scripts 面板侧边, 有个 伊芙nt Listener Breakpoints,
这里列出了扶持的具备事件, 不仅仅 click, keyup 等事件, 还援助 Timer(在
setTimeout setInterval 管理函数从前实施时暂停State of Qatar, onload, scroll 等事件.

图片 7

3.Ajax 时中断

在 Sourse 面板左侧有个 XHGL450 Breakpoints, 点右边的 + 会增多二个 xhr 断点,
断点是依附 xhr 的 url 相配中断的, 借使不写相配法规会在具有 ajax,
那些般配只是简单的字符串查找, 发送前龙头蛇尾, 在暂停后再在 Call Stack
中查阅时特别地点倡导的 ajax 需要

3.Ajax 时中断

5. Javascript 分外时停顿

Pretty print 侧边的开关是翻开 js 抛至极时行车制动器踏板的开关,
有二种情势:在颇有非常处中断, 在未捕获的可怜处中断.
在那么些处中断后就足以查看为何抛出非常了

4.页面事件中断

除了给设定常规断点外, 还是能在某一特定事件时有爆发时暂停(不照准元素卡塔尔 , 在
Sourse 面板左边, 有个 伊夫nt Listener Breakpoints,
这里列出了支撑的保有事件, 不独有 click, keyup 等事件, 还援救 提姆er(在
setTimeout setInterval 管理函数伊始试行时停顿卡塔尔(قطر‎, onload, scroll 等事件。

在 Scripts 面板左边有个 XHEnclave Breakpoints, 点侧面的 + 会增添一个 xhr 断点,
断点是基于 xhr 的 url 相称中断的, 如果不写相配准则会在有着 ajax,
那些相配只是简短的字符串查找, 发送前暂停, 在脚刹踏板后再在 Call Stack
中查阅时拾分地点倡导的 ajax 央求

6. DOM Level 3 伊芙nt 事件中断

在 Elements 面板, 选中一个要素右键, 有多个选项:Break on subtree
modifications, Break on attributes modifications, 这八个对应 DOM Level 3
Event
中的DOMSubtreeModified , DOMSubtreeModified 事件
在 Scripts 面板 DOM Breakpoints 处会列出全体 level3 的 event 中断

图片 8

5.Javascript 非常时行车制动器踏板

在 Chrome
开辟者工具中,能够开启运营时不当自动制动踏板这一功力,进而使开辟者工具能在意识运转时脚本至极时,在老大脚本处暂停运转,跳转至调节和测量试验页面,供开垦职员进一层搜求该运行时十三分发生的由来。

电动制动踏板按钮的下方有三个取舍,Pause On Caught
Exceptions,假设勾选上,则便是所发生运行时丰裕的代码在 try/catch
范围内,Chrome 开辟者工具也能够在错误代码处停住。

图片 9

4.页面风云中断

7. 颇有 js 文件中查找&查找 js 函数定义

  • 在 chrome developer tool 张开的动静下, 按 ctrl + shift + F, 在经过
    js 钩子查找代码地点时很有用, 查找帮助正则表达式
  • 追寻函数定义: ctrl + shift + 0 (在 Scripts panel 下卡塔尔(قطر‎
  • 查找文件: ctrl + o  (在 Scripts panel 下State of Qatar
  • 越来越多神速键: 在 chrome developer tool 中按 ? 查看支持

图片 10

6.DOM Level 3 Event 事件中断

在 Elements 面板, 选中三个要素右键, Break on 有八个选项:subtree
modifications, attributes modifications, 那多个对应 DOM Level 3 Event
中的DOMSubtreeModified
,
DOMSubtreeModified
事件 在 Scripts 面板 DOM Breakpoints 处会列出装有 level3 的 event 中断。

图片 11

除了这一个之外给设定常规断点外, 还足以在某一一定事件爆发时中断 , 在 Scripts
面板左边, 有个 伊芙nt Listener Breakpoints, 这里列出了支撑的具有事件,
不止 click, keyup 等事件, 还援救 Timer(在 setTimeout setInterval
管理函数开始履行时暂停State of Qatar, onload, scroll 等事件.

8. command line api

  • $(id_selectorState of Qatar 那么些与页面是还是不是有 jQuery 非亲非故
  • $$(css_selector)
  • $0, $1, $2, $3, $4
    1. Elements 面板中近期入选的 5 个要素, 最终选项的是 $0
    2. 这些 5 个变量时先进先出的
  • copy(str卡塔尔国 复制 str 到剪切板, 在断点时复制变量时有用
  • monitorEvents(object[, types])/unmonitorEvents(object[, types])
    1. 当 object 上 types 事件发生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console)
    或 点击
  • 更多 command line
    api 点击

图片 12

7.在 js 文件中研究&查找 js 函数定义

  • 在 chrome developer tool 张开的动静下, 按 ctrl + shift + F, 在经过
    js 钩子查找代码地方时很有用, 查找能够帮助正则表明式
  • 寻找函数定义: ctrl + shift + 0 (在 Sources panel 下卡塔尔(قطر‎
  • 查找文件: ctrl + o (在 Sources panel 下State of Qatar
  • 越来越多急忙键: 在 chrome developer tool 中按 ? 查看帮忙

图片 13

5.Javascript 格外时停顿

9. 实时改革 js 代码生效

  • 页面外界 js 文件在 Scripts 面板中得以一直改换, 改完后按 ctrl + S
    保存, 会立即生效
  • 注意
    1. 经测量检验不辅助 html 页面中 js 修正
    2. 透过 Pretty print 格式化的脚本不支持矫正

Chrome调试(转)。8.command line api

二种档期的顺序的命令行:
1.
单行格局。单行情势是chrome的暗许命令行方式,它同意我们叁回输入一行代码。单行形式的长处是帮助电动完结。
那么些很有力的,好似在极限中同样,你还足以应用上下键来调入方今接受过的通令。
2.
多行方式。多行情势是单行情势的狠抓版,它同意大家二回输入多行代码而且及时实践。

例子:

  • console.group(卡塔尔(قطر‎和console.groupEnd(卡塔尔国 分组展现
  • console.dir(State of Qatar能够显得一个目的具备的品质和艺术
  • console.dirxml(State of Qatar用来展示网页的某部节点(node)所饱含的html/xml代码。
  • console.trace(卡塔尔(قطر‎用来追踪函数的调用轨迹。
  • console.time(卡塔尔国和console.timeEnd(State of Qatar,用来展现代码的运维时刻。

Pretty print 侧面的开关是张开 js 抛卓殊时停顿的开关,
有二种方式:在富有极其处中断, 在未捕获的要命处中断.
在十一分处中断后就足以查看为什么抛出十一分了

10. console 中施行的代码可断点

在 console 中输入代码的末段一行加上 //@ sourceULX570L=filename.js, 会在
Scripts 面板中有个叫 filename.js 的文件, 然后她就和表面 js 文件一律了

图片 14

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js

6.DOM Level 3 Event 事件中断