「神器」Chrome开发者工具使用教程 _生活知道

对于每个前端开发者来说，除了F5和Ctrl C+V (大雾) 之外，用的最多的恐怕就是F12 Chrome开发者工具了。对于这个工具，相信很多前端同学都了解不少使用的技巧，但是系统地学习过它的人却不多，今天咱们就一起完整地学习一下它的功能和使用方法，你也许会发现很多之前“用错”的工具呢。
本文中采用的示例和截图，来自于葡萄城前端表格产品SpreadJS ，大家手边如果没有相关环境也不影响学习，我们今天的主题还是Chrome 开发者工具。
首先打开谷歌浏览器，进入SpreadJS在线表格编辑器示例。通过F12（快捷键：Ctrl+Shift+I 或者Cmd+Shift+I ）或者通过右键菜单项的“检查“菜单项来打开开发者工具。在开发者工具中，最核心的功能就是功能面板。如下图所示，包括了选择元素、设备模式以及元素、控制台、源代码等。
元素：用于查看网页中的html结构与css样式；
控制台：浏览器中输入控制台信息，js脚本执行过程中，输出执行状态可以在控制台查看；
源代码：源代码与静态资源，进行网站源代码的调试、查看、编辑；
网络：每一个网站都有后台web服务器，网站前端与服务器http交互过程中，可以查看网络日志，可以查看调试；
性能：分析网站性能状态，js脚本执行性能、网页渲染性能、后端请求性能；
内存：当前网页内存情况，是否存在内存泄漏；
应用：查看网页的缓存信息，如cookie、loocalStroage等；
鼠标点击图标后变为蓝色背景。此时将鼠标移至网页中，会发现鼠标移到某个页面元素上时，右侧开发者工具”元素”面板会高亮对应dom结构。
鼠标点击图标启用浏览器仿真器。
将鼠标移到设备上可查看圆形“触摸”光标。这将对基于触摸的 JavaScript 事件（如touchstart，touchmove和touchend）做出反应。鼠标特定的事件和 CSS 效果不会做出反应。SpreadJS 控件已针对触屏进行优化，方便用户在移动端使用。启用浏览器仿真器后，可以查看SpreadJS的移动端使用情况。如下图所示：
其次还可以通过拖拽控制台，修改尺寸，动态修改当前网页分辨率。
这时候有小伙伴发现我的开发者工具一直停留在网页右侧，如果此时想修改位置，怎么办呢？可以设置停靠模式：在新页面打开；左侧；右侧；下侧等。如下图所示：
在元素面板中，分为左右两栏，左栏显示整个文档的dom结构，树形结构。在此面板中选择特性dom元素，右侧会显示更详细的属性信息。
通过元素选择器选中元素后，可以直接修改dom元素。选中颜色高亮，双击，进入编辑状态，修改dom元素谷歌浏览器没有工具栏，是实时发生的。
【「神器」Chrome开发者工具使用教程】通过右键菜单可以进行添加属性、修改属性、删除属性、复制粘贴元素（原地复制）、
复制（可以复制多种格式如：复制outerHtml、selector、js路径、样式、xPath、完整xPath）、隐藏元素、强制执行状态（：hover、：focus）、存储为全局变量等
选中元素后，可以修改样式。如下图所示，直接修改在线表格编辑器高度，将‘100%’改为‘1024px’ 。
同时修改样式时，支持颜色选择器（实时预览颜色颜色透明度，编码方式）、支持阴影选择器等。
在控制台面板中，有如下功能：
1、控制台可以清空或者保存历史，如下图所示。在控制台输入信息后，可以右键选择相应操作。
2、通过上下键来切换控制台代码历史。
3、通过关键字来搜索控制台信息。
4、创建控制台实时表达式。
在线表格编辑器实例化了一个Designer组件，在控制台中可以对其进行操作。第一步根据dom节点获取Designer实例对象，其次可以通过getWorkbook()方法获取WorkBook实例对象spread 。由于一个工作簿可能存在多个sheet表单，所以这里可以通过getActiveSheet()方法获取下表单实例sheet 。在sheet基础上，可以为当前表单设置单元格值，设置列宽等等。
var designer = GC.Spread.Sheets.Designer.findControl(document.querySelector("#gc-designer-container"))var spread = designer.getWorkbook()var sheet = spread.getActiveSheet();sheet.setValue(0,0,'hello,Spread')sheet.setColumnWidth(0,100)
5、控制台编程接口
1) console.log 最常用 / console.warn / console.error
2) console.assert
3) console.time / console.timeEnd
4) console.group / console.groupEnd / console.groupCollapsed

文章插图
5) console.table
6) console.clear
下面就分别来看看着六种控制台打印接口用法吧
1、console.log() 支持打印字符串，数字，对象，对象等等。同时还可以设置字体颜色，如console.log('%c hello ,SpreadJS','color:red'); 为' hello ,SpreadJS' 设置了红色字体。运行结果如下图所示：
cosole.warn() 打印警告，会出现黄色背景，与感叹号符号。运行结果如下图所示：
onsole.erroe() 打印报错信息，会出现红色背景与错误符号。运行结果如下图所示：
2、console.assert() 打印断言谷歌浏览器没有工具栏，如果断言为假，则进入控制台，如果断言为真，则不会发生任何事情。
在本文前面部分，我们讲了如何获取designer对象，继而获取了当前活动表单sheet，其实获取表单的方法不只是getActiveSheet()，还有getSheet()、getSheetByName()等方式，那么通过console.assert来判断下这几种方式获取的表单实例是不是同一个呢？如下代码：
var sheet_2 = spread.getSheet(1);
console.assert(sheet==sheet_2 ,'期待两个实例是一样的');
var sheet2 = spread.getSheetFromName('Sheet2');
console.assert(sheet==sheet2 ,'期待两个实例是一样的');
运行结果如下图所示：
那么，如果断言失败，会怎么样子呢？这里获取了索引位置为0的表单与索引为1的表单进行了断言，如下所示：
3、console.time() / console.timeEnd() 可以用来获取自从执行console.time()到执行console.end() 中间时间。
在使用SpreadJS中，官方建议如果设置大数据量的更新时，可以使用挂起绘制与恢复绘制来提高性能，咱们来对比下使用与不用这个方法的具体时间差吧，
下图一是使用了suspendPaint/resumePaint 方法，为100行10列的单元格设置数据，一共耗时81毫秒。
下图二是没有使用suspendPaint/resumePaint 方法，一共耗时21294毫秒。差距还是挺大的。
4、console.group()控制台输入树形结构，如下图所示：
console.group()组合使用创建二级节点，如下图所示：
5、console.table()可以打印表格结构，如下图所示：
6、console.profile() 可以进行性能分析。
在源代码面板中，大概分成三栏，左侧展示资源树，中间为打开的源代码内容，右侧调试工具包括断点，调用堆栈等。在源代码面板中，主要功能为查看代码，调试代码。其中在查看代码过程中，可以进行美观输出。
现在大部分源文件为了提供性能，提供压缩后的文件，如果遇到某行代码报错，打开源文件看到一堆代码非常不利于阅读，此时可以通过源文件下方大括号的图标来进行美化代码。
在调试代码过程中，可以通过打断点方式来调试代码，如何打断点呢？定位到目标行数，在行数左侧轻轻点一下，会出现一个蓝色小圆点，此时断点就ok了。当网页运行到该代码时，就会触发DeBug模式。
在网络面板中，可以获取资源与查看日志。
限于篇幅，今天的分享先到这里，更复杂的应用场景以后会持续给大家分享，欢迎关注。
本文到此结束，希望对大家有所帮助！

「神器」Chrome开发者工具使用教程

猜你喜欢