## **生效样式**  ## **压缩js格式化显示（方便调试）** source（源代码）源工具找到js文件点击{}就可以格式化压缩代码啦，断点调试也在这里  ## **断点调试**  **在开发工具控制台中输入`debugger;`，它会立即将内容放入调试器并停止脚本** ## **如何检查在失去焦点时从 DOM 中消失的 html 元素？** 我正在尝试检查表格单元格输入中的 CSS 属性。输入在单击时出现并在失去焦点时消失，就像我尝试检查它时一样。 当我移动到另一个窗口(检查器)时，我该怎么做才能不失去焦点？   如果所有其他方法都失败了,请在控制台中输入: ~~~ setTimeout(() => { debugger; }, 5000) ~~~ # 利用谷歌Chrome浏览器查看页面哪些**js**被触发 和 **事件**在哪触发 在调试web页面时，我们想修改某处的js效果，但由于页面引入的js文件较多，不知道该在哪个文件里去找，这时候可以利用Chrome浏览器来帮助我们调试。 ## 如何使用 1.在Chrome浏览器中按F12打开开发者工具，切换到`Sources（源码）`选项卡 2.在`Sources（源码）`选项卡右侧找到`Event Listener Breakpoints（事件监听断点）`,勾选你想监听的事件 3.在`all Stack（函数调用栈）`中观察 4.排除监听特定的js文件如jquery   ## 示例 例如本篇博客右侧有一个“返回顶部”的按钮，我们想找到这个按钮绑定的点击事件并做修改。  1.在Chrome浏览器中按F12打开开发者工具，切换到`Sources（源码）`选项卡：  2.在`Sources（源码）`选项卡右侧找到`Event Listener Breakpoints（事件监听断点）`,勾选鼠标的点击事件：  3.点击“返回顶部”按钮，然后在右侧`all Stack（函数调用栈）`中观察：  点击调用栈中的断点，左侧将会定位到相应的js代码处：  点击图中的按钮或者按F11，将会进入到函数内部继续查看：  也可以点击图中的按钮或F10，跳过函数执行下一行代码：  可以发现通过以上办法可以迅速的找到相应的代码，方便我们定位并修改。当然有的时候并不是那么快就可以找到，需要我们一步一步的点击并查看。