概要

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

1. 断点以及捕捉事件绑定

这里用一个 demo 文件来演示上面的所有东西,新建一个 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 中并开启服务,在谷歌浏览器中输入 localhost/debugtest/ 打开页面,在 input 中输入内容并点击 【测试成功】按钮,显示如下证明一切正常

断点

在开发者工具中,找到 Sources(资源) -> 在找到 localhost -> debugtest -> index.html,在右侧的文本文件中用鼠标在 33 行的前面点击一下这个就是打上断点了

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

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

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

如果说不想调试的这么多,在页面刚开始运行到断点的时候,直接点第二个按钮就跳出整个函数了

寻找事件监听

接下来是找到当前元素所绑定的事件

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

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

DOM 元素断点

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

现在再在浏览器中先将之前的断点去掉,方法跟打断点是一样的,之后刷新浏览器,整个的执行时这样的

先输入内容 -> 点击【测试成功】按钮 之后会发现 下面的 test-div 元素就隐藏了,这是一个相当简单的 jquery 实现的效果

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

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

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

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

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