chrome调试工具高级不完整使用指南（实战二）

时间 2019-11-06

原文原文链接

3.3 给页面添加测试脚本

在现实的工做中，咱们每每会遇到一些问题在线上就会触发而后本地就触发不了的问题。或者是，要给某个元素写一个测试脚本。这个时候若是是浏览器有提供一个添加脚本的功能的话，那么咱们的整个操做就方便多了。具体操做以下：html

咱们先来给本身定一个需求，咱们要在博客园的tab面板上面添加一个弹窗，弹窗的内容为1前端

这个时候的操做以下：首先先把面板切换到Sources，而后再右侧中选中Snippets，接着点击New snippet来，添加的脚本以下：jquery

$(".post_nav_block").on("click","li",function(){
    alert(1);
})

[观察netWork中的加载，咱们发现博客园使用了jquery，因此咱们可使用jquery的绑定事件，对于不存在jquery引入的网站，咱们不能这样使用]chrome

编写以后保存咱们发现点击以后没有反应，其实这个脚本编写以后是须要运行才可以使用浏览器

右击选择run,只要不触发页面刷新，新加入的脚本是不会中止的，若是触发刷新就会中止脚本的运行，可是脚本仍是存在。即便你关闭了浏览器，下一次打开仍是存在这个脚本，除非你删除了这个脚本。函数

3.4 经典的断点调试

相信不少前端人员都应该挺熟悉断点调试的吧，不熟悉也没有关系，咱们来整理一下。首先咱们本身编写以下的一段测试代码：工具

<html>
    <script>
        var a=1;
        var b=2;
        console.log(b);
        console.log(a);
    </script>
</html>

断点以下：post

若是咱们要在断点3调到断点5，不通过断点4的话，咱们可使用左侧的按钮性能

若是要分别一次进行下去，只须要按下F10测试

若是有函数的话，要运行到函数内部，可使用F11

其中是用来开启和关闭断点，当关闭断点后，全部的断点都会失效

选中变量，右击菜单选择Add selected text to watches把变量添加到右侧的watch面板，这样能够监控一个变量的当前状况。

从新编写一段测试代码：

 <script>
        test1();
        function test1(){
            test2();
        }
        function test2(){
            test3("this is test");
        }
        function test3(params) {
            console.log(params);
        }
        var a=1;
        alert(a);
    </script>

而后在test3下面的console.log语句中打断点。

咱们看下右侧的栈调用面板以下：

从而咱们能够快速的定位到函数的栈调用状况

3.5 查看chrome插件的代码

chrome中的source提供了一种能够查看插件代码的功能，选中右侧中的Content scripts就能够看到了，以下：

具体的代码就能够将文件夹直接展开就能够了。

source模块的用法大体上也就是这些了。下一节将讲一讲chrome对性能分析上面的利用。

chrome调试工具高级不完整使用指南（基础篇）

chrome调试工具高级不完整使用指南（优化篇）

chrome调试工具高级不完整使用指南（实战一）

chrome调试工具高级不完整使用指南（实战二）