4、Chrome之Source面板

一、界面

 

A区域:

1、Page

a.展示上下文环境中的所有资源

2、Filesystem

a.可以导入本地源码，在soure面板下对源码进行编辑，ctrl + s保存会将修改的代码保存到本地，相当于编辑器。

b.local Modifications:右键点击，会展示修改过后的代码，

c.ctrl + s ：会将代码保存到本地，我们也可以在开发工具中开到修改过后的代码

3、Overrides

a.可以重新一个脚本，并且刷新不会被清除

b.操作步骤

①切换到Overrides页签

②添加一个文件夹

③切换回到Page页签

④选中一个js，右键选中save for override，便可对js进行编辑了，编辑后刷新也不会将保存的数据清除

⑤重写后，会在Overrides页签下生成一个和源文件路径一致的文件，其实页面在加载时会优先引入重写的js等文件，也可以在network面板中右键js/图片/html重写，xhr请求不可重写。

⑥实例如下 

4、Content scripts

a.用来存放拓展程序中上下文脚本，content script运行在称之为“隔离环境”的特殊环境中，虽然它能够对页面的dom进行直接访问及操作，但对页面上的js变量及函数却无法进行访问

b.安装一个vue.js develop插件便能看到脚本了，详情参考http://open.chrome.360.cn/extension_dev/content_scripts.html

5、Snippets

a.代码片段，也是可以长久保存在浏览器中的，不会被刷新清除，可以直接访问页面元素及对象

b.实例

function createElement(){
    var parent = document.querySelector("body");
    var div = document.createElement("div");
    div.id = "main";
    var css = "position:relative; left:40px;top:40px;border:1.5px;width:600px;height:500px;z-index:99999;opacity:0.9;";
    div.style.cssText = css;
    parent.appendChild(div);
    var timeValue = performance.getEntries('navigation')[0];

    var myChart = echarts.init(document.getElementById('main'),'dark');
        var option = {
            title: {
                text: '页面性能'
            },
            tooltip: {},
            legend: {
                data:['耗时/ms']
            },
            xAxis: {
                data: ['白屏','首屏','渲染','TTI','响应','完成']
            },
            yAxis: {

            },
            series: [{
                name: '耗时/ms',
                type: 'bar',
                data: [timeValue.requestStart, timeValue.loadEventEnd, timeValue.domComplete, timeValue.domInteractive, timeValue.responseEnd-timeValue.requestStart, timeValue.duration]
            }]
        };
        myChart.setOption(option);

        div.style.position = 'fixed';
    } 
    createElement();

注：引入echarts.js，在snippet中执行代码，便能获取页面相关时间，时间的值通过performance来获取

 

B区域：

1、右键菜单功能说明

1、Blackbox script ：黑盒脚本，当把某个js添加进Blackbox中时，在进行debug调试时，便不会进入该js的源码中。

2、{}：格式化js

3、Ctrl + Enter：运行js，等于右键run

4、Coverage：代码覆盖率

点击Coverage，在点击刷新，就会生成js的代码覆盖率

Per function：按方法统计

Per block：按块统计

C区域：

 

1、Pause script execution：暂停脚本执行，快捷键F8

2、Resume script execution：恢复脚本执行，直到遇到下一个断点，快捷键F8

3、Step over next function call：跳过下一个方法，快捷键F10

4、Step into next function call：步入下一个方法，快捷键F11

5、Step out of current function：步出当前的方法，快捷键Shift + F11

6、Step：下一步，快捷键F9

7、Deactivate breakpoints：使断点失效，快捷键Ctrl + F8

8、Activate breakpoints：激活断点，快捷键Ctrl + F8

9、Pause on exceptions：异常处暂停，点击后脚本执行时出现错误就会自动开启调试模式

10、Don't pause on exceptions：不在异常处暂停，点击后脚本执行时出现错误则不会开启调试模式

11、Watch：监测表达式，可以添加多个表达式，在调试运行时，会监测该表达式的结果

12、Call Stack：函数调用堆栈，展示了断点处代码被调用的详细路径

13、Scope：作用域

14、Breakpoints：断点列表

右键断点菜单说明

a.Remove breakpoint：移除断点

b.Reveal location：定位到断点处

c.Deactivate breakpoints：使断点失效

d.Disable all breakpoints：取消所有断点

e.Remove all breakpoints：移除所有断点

f.Remove other breakpoints：移除所有其他断点 

15、XHR/fetch breakpoints：通过url过滤进行断点调试

16、DOM breakpoints：dom断点列表

17、Event Listener Breakpoints：事件断点监听，此处可以添加对事件的断点监听

18、断点，右键行号

a.Add breakpoint：添加断点，等同于鼠标在行号上单击

b.Add conditional breakpoint：添加条件断点

如图，给131行及以下的行，添加条件 x==5的断点，则会开启调试模式，如果在131行之上添加此条件断点，则不会开启调试模式

c.Add logpoint：日志断点，直接输入需要打印出内容即可，该内容会在控制台输出，并不会开启调试模式