JS-debugger

debugger; ：只要把它写到代码里，Chrome 运行的时候就会自动自动停在那。

把 objects 输出成表格: console.table

试遍所有的尺寸: Chrome 浏览器提， 进入检查面板点击 ‘切换设备模式’ 按钮，这样你就可以调整视窗的大小了

$_是一个特殊变量，它的值始终等于控制台中上一次操作的执行结果。它可以让你更加优雅地调试代码。

快速定位 DOM 元素 : 在元素面板上标记一个 DOM 元素并在 console 中使用它。Chrome Inspector 的历史记录保存最近的五个元素，最后被标记的元素记为 $0，倒数第二个被标记的记为 $1，以此类推。

用 console.time() 和 console.timeEnd() 测试循环耗时

获取函数的堆栈轨迹信息: console.trace()

快速找到调试函数: debug(funcName)

美化调试信息:常见的占位符 %o (这是字母o，不是0)，它接受对象;%s 接受字符串;%d 表示小数或整数;%cCSS值的占位符。

console.important = function(msg) {
 console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

查看具体的函数调用和它的参数: monitor(fn)

节点变化时中断: Chrome 可以在 DOM 元素发生变化的时候暂停处理。在 Chrome 探查器上，右键点击某个元素，并选择中断（Break on）选项来使用

console.memory 检查堆大小状态

console.profile(‘profileName’) & console.profileEnd(‘profileName’) 从代码中启动和结束浏览器性能工具 - “performance profile”。

ctrl+shift+p 调用控制台

重新发送 XHR 请求 ： 打开“网络”面板 - 单击 XHR 按钮 - 选择要重新发送的 XHR 请求 - 重放 XHR 请求

copy函数不是由 ECMAScript 定义的，而是由 Chrome 浏览器提供的。使用此功能，你可以将 JavaScript 变量的值复制到你的剪贴板中，方便在其他位置使用。

Chrome 浏览器中，将图像转换为 Data URL . network - img -选择图片 - preview - Copy image as data URL

在“元素”面板对 DOM 元素进行拖放:有时我们想调整页面上某些 DOM 元素的位置以测试 UI。在“元素”面板中，你可以拖放任何 HTML 元素来更改其在页面中的显示位置

隐藏元素的快捷方式 : 在调试 CSS 样式时，我们通常需要隐藏一个元素。如果选择元素并按下键盘上的H键，我们就可以快速隐藏该元素。

将 DOM 元素存储在全局临时变量中 ： 选择某个元素 - 右键点击鼠标 - 存储为全局变量

查找与DOM中的元素关联的事件: getEventListeners($('selector')) 返回一个对象数组，其中包含绑定到该元素的所有事件。

监控事件:在执行绑定到 DOM 中特定元素的事件时监视它们，也可以在控制台中这样做.monitore($(selector)，[eventName1, eventName3'， .])

检查 DOM 中的一个元素:inspect($(‘selector’)) 将检查与选择器匹配的元素，并转到 Chrome Developer Tools中的 Elements 选项卡。

代码调试过程中，在 Local-> 右键 Store as global variable 。开发者工具会自动分配一个名为 temp{n} 的变量，n 基于先前保存的变量的数目。