整体概要
- 断点以及捕捉事件绑定
- Audits 和 Chrome 性能插件
- Timeline 掌握帧渲染模式
- 可以看到整个的 webkit 在渲染整个层或者是每一帧的时候是如何使我们的网页达到 60FPS 这样高性能渲染模式的
- Profiles 分析具体问题
- 包括 NodeJS 的性能泄露等等，NodeJS 的性能问题有内存泄露这样的问题，都可以通过 Profiles 这个来解决掉
正文
断点以及捕捉事件绑定
- 这里用一个demo文件来演示上面的所有东西，我这里使用的是 xampp ，将整个的文件夹放入到了 C:\xampp\htdocs 目录下
image.png
- 在文件夹中新建一个 index.html 并编辑如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chrome 高级调试技巧</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
body{
padding: 15px;
}
#test-div{
width: 100px;
height: 20px;
background-color: #eee;
border: 1px solid #333;
top: 30px;
left: 200px;
text-align: center;
cursor: default;
}
</style>
</head>
<body>
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control" id="exampleInput" placeholder="Email">
<button type="button" style="margin-top: 5px;" id="btn-test" class="btn btn-success">测试成功</button>
<div id="test-div">一段文字</div>
</body>
<script>
$('#btn-test').click(function(){
alert($('#exampleInput').val());
// $('#test-div').hide();
})
</script>
</html>
- 打开 XAMPP 开启 Apache
image.png
- 在谷歌浏览器中输入 localhost/debugtest/ 打开页面，在 input 中输入内容并点击 【测试成功】按钮，显示如下证明一切正常
image.png
断点
-
在浏览器右侧（F12）之后的开发者工具中，找到 Sources（资源） -> 在找到 localhost -> debugtest -> index.html，在右侧的文本文件中用鼠标在 33 行的前面点击一下这个就是打上断点了
image.png
-
之后再点击左侧的【测试成功】按钮，代码在运行到上面的 33 行处就会暂停了，点击下面被红色圆圈圈中的就可以一步一步的向下调试，它的右侧是一步一步的向上调试，它的左侧的是可以跳出当前的 function 可以进入到下一个 function 里面进行调试
image.png
- 点击上图中的向下调试按钮，它会进入到alert 里面的
$('#exampleInput').val()进入到 jquery 中去找这个里面的值这样的执行函数中去了
image.png
- 点击到了最后，没有执行的函数之后，结果就弹出来了
image.png
- 如果说不想调试的这么多，在页面刚开始运行到断点的时候，直接点击下图中的按钮就可以直接跳出整个函数了
image.png
- 这样结果就直接弹出来了
image.png
寻找事件监听
- 接下来是找到当前元素所绑定的事件
- 在我在【测试成功】按钮上使用鼠标右键选中【检查】选项的时候，可以在右侧找到 【Event Listeners】选项，在下面可以看到，在元素上绑定了一个 click 事件
image.png
-
后面的地址点击之后就可以直接跳转到事件绑定的源代码了
image.png
DOM 元素断点
-
接着将 index.html 中的 34 行 解注释
image.png
- 现在再在浏览器中先将之前的断点去掉，方法跟打断点是一样的，之后刷新浏览器，整个的执行时这样的
- 先输入内容 -> 点击【测试成功】按钮 之后会发现 下面的 test-div 元素就隐藏了，这是一个相当简单的 jquery 实现的效果
image.png
-
下面我们想要的是当 test-div 元素被改变时可以被监控到给出提示，这里我们在下图选的元素位置 鼠标右键 选择 -> Break on -> 再选择 Node removal ，选中之后它会在这个 dom 元素的前面打一个小蓝点
image.png
-
这个时候再刷新浏览器，执行一遍之前的流程操作
-
这个时候会发现 test-div 元素也隐藏了，效果上来说和之前的没什么变化
image.png
- 但是说如果将
$('#test-div').hide()改成$('#test-div').remove()
image.png
-
之后再次刷新页面进行操作的时候可以看到他是直接定位到了 jquery 中给元素执行 remove 时 function 的节点范围
image.png
-
上面的是 Node removal DOM 元素被删除时会查看，还可以选择 Subtree modifications DOM 元素被修改时或者 Attributes modifications DOM 元素属性的变化
image.png
网友评论