整体概要

  • 断点以及捕捉事件绑定
  • Audits 和 Chrome 性能插件
  • Timeline 掌握帧渲染模式
  • 可以看到整个的 webkit 在渲染整个层或者是每一帧的时候是如何使我们的网页达到 60FPS 这样高性能渲染模式的
  • Profiles 分析具体问题
  • 包括 NodeJS 的性能泄露等等，NodeJS 的性能问题有内存泄露这样的问题，都可以通过 Profiles 这个来解决掉

    正文

    断点以及捕捉事件绑定

  1. 这里用一个demo文件来演示上面的所有东西，我这里使用的是 xampp ，将整个的文件夹放入到了 C:\xampp\htdocs 目录下

image.png

  • 在文件夹中新建一个 index.html 并编辑如下 ``` <!DOCTYPE html>
    一段文字

```

  1. 打开 XAMPP 开启 Apache

image.png

  • 在谷歌浏览器中输入 localhost/debugtest/ 打开页面，在 input 中输入内容并点击 【测试成功】按钮，显示如下证明一切正常

image.png

断点

  1. 在浏览器右侧（F12）之后的开发者工具中，找到 Sources（资源） -> 在找到 localhost -> debugtest -> index.html，在右侧的文本文件中用鼠标在 33 行的前面点击一下这个就是打上断点了

image.png

  1. 之后再点击左侧的【测试成功】按钮，代码在运行到上面的 33 行处就会暂停了，点击下面被红色圆圈圈中的就可以一步一步的向下调试，它的右侧是一步一步的向上调试，它的左侧的是可以跳出当前的 function 可以进入到下一个 function 里面进行调试

image.png

  1. 点击上图中的向下调试按钮，它会进入到alert 里面的 $('#exampleInput').val() 进入到 jquery 中去找这个里面的值这样的执行函数中去了

image.png

  • 点击到了最后，没有执行的函数之后，结果就弹出来了

image.png

  1. 如果说不想调试的这么多，在页面刚开始运行到断点的时候，直接点击下图中的按钮就可以直接跳出整个函数了

image.png

  • 这样结果就直接弹出来了

image.png

寻找事件监听

  1. 接下来是找到当前元素所绑定的事件
  • 在我在【测试成功】按钮上使用鼠标右键选中【检查】选项的时候，可以在右侧找到 【Event Listeners】选项，在下面可以看到，在元素上绑定了一个 click 事件

image.png

  • 后面的地址点击之后就可以直接跳转到事件绑定的源代码了

image.png

DOM 元素断点

  1. 接着将 index.html 中的 34 行 解注释

image.png

  • 现在再在浏览器中先将之前的断点去掉，方法跟打断点是一样的，之后刷新浏览器，整个的执行时这样的
  • 先输入内容 -> 点击【测试成功】按钮 之后会发现 下面的 test-div 元素就隐藏了，这是一个相当简单的 jquery 实现的效果

Animation13.gif

  1. 下面我们想要的是当 test-div 元素被改变时可以被监控到给出提示，这里我们在下图选的元素位置 鼠标右键 选择 -> Break on -> 再选择 Node removal ，选中之后它会在这个 dom 元素的前面打一个小蓝点

image.png

  1. 这个时候再刷新浏览器，执行一遍之前的流程操作
  • 这个时候会发现 test-div 元素也隐藏了，效果上来说和之前的没什么变化

Animation14.gif

  1. 但是说如果将 $('#test-div').hide() 改成 $('#test-div').remove()

image.png

  • 之后再次刷新页面进行操作的时候可以看到他是直接定位到了 jquery 中给元素执行 remove 时 function 的节点范围

Animation15.gif

  1. 上面的是 Node removal DOM 元素被删除时会查看，还可以选择 Subtree modifications DOM 元素被修改时或者 Attributes modifications DOM 元素属性的变化

Animation16.gif