简介: JavaScript作为解释性语言,对于Web也来说,它的运行环境是浏览器(主要介绍Chrome),如果每次都是靠console.log()或alert()来打印临时变量进行程序调试,效率就太低了。
DevTools面板
在网页鼠标右击-检查
或者 F12
打开DevTools
选项卡认识
Chrome浏览器的DevTools为我们提供了十分强大的功能,界面按钮和信息繁多。
1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态
2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择
名称 | 描述 |
---|---|
Elements 元素面板 | ,查看Web页面的HTML与CSS ,最重要的是可以双击元素,对当前页面进行修改 |
Console 控制台面板 | JavaScript输出信息的控制台 ,在这里可以查看到,JS的错误信息 ,也可以执行键入的,JS脚本 |
Sources 源代码面板 | 我们在这个页面对JS代码进行调试,可设置断点 |
Network 网络面板 | 可以明确的查看到访问Web页面 所产生的全部请求 (包括应答状态、响应时间、数据量等信息)和下载的资源文件,并可以模拟不同的网络状态(在线、离线、3G等)下对Web的加载情况,可以用于分析和优化网页加载性能 |
Performance 性能面板 | 记录和查看Web页面在浏览器中运行时的性能表现 (注意是运行时,而不是加载时),主要用于发现Web页面运行时性能瓶颈和性能调优 |
Memory 内存面板 | 记录执行JS函数对CPU和内存的使用情况,可以识别开销大的JS函数,跟踪内存泄露 ,帮助代码优化,提高JS执行性能 |
Application 应用面板 | 记录Web页面加载的所有资源信息 ,包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等 |
Security 安全面板 | 查看Web页面的安全和认证情况 ,确保网站上正确地实现了HTTPS |
Audits 审计面板 | 从性能(Performance)、PWA兼容性(Progressive Web App)、可访问性(Accessibility)、最佳实践(Best Practices)、搜索引擎优化(SEO)这五个维度给你的网站打分,并给出一份评估报告和优化建议,可以说是非常的强 |
Elements元素面板(HTML+CSS)
用来查看,修改页面上的元素
,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息
,下图我们可以看到当我鼠标选择id 为lg_tar的div元素时,右侧的css样式对应的会展示出此id 的样式信息
,此时可以在右侧进行一个修改,修改即可在页面上生效, 灰色的element.style样式同样可以进行添加和书写。
唯一的区别是,在这里添加的样式是添加到了该元素内部,实现方式即:该div元素的style属性,这个页面的功能很强大,在我们做了相关的页面后,修改样式是一块很重要的工作,细微的差距都需要调整,但是不可能说做到每修改一点即编译一遍代码,再刷新浏览器查看效果,这样很低效
,一次性在浏览器中修改之后,再到代码中进行修改对应的样式
实时编辑样式
在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改,除了灰色部分(与 User Agent 样式表一样)。
要编辑名称或值,请点击它,进行更改,然后按 Tab 或 Enter 保存更改
默认情况下,您的 CSS 修改不是永久的,重新加载页面时更改会丢失
检查和编辑框模型参数
使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改,只需点击它们即可
同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。
对于位置为非静态的元素,还会显示 position 矩形,包含 top、right、bottom 和 left 属性的值
对于 position: fixed 和 position: absolute 元素,中心域包含选定元素实际的 offsetWidth × offsetHeight 像素尺寸。所有值都可以通过双击修改,就像 Styles 窗格中的属性值一样。 不过,无法保证这些更改能够生效,因为这要取决于具体的元素定位详情
Console控制台(错误信息)
用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能
Network网络面板(请求信息)
可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看
所有的资源
以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息
请求的相关信息
打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些,还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据
Source调试面板(JS调试)
调试最重要的一个面板就是Source面板了,这里着重介绍这个面板的功能。打开Source面板,我们就会看到如下界面:
根据上图三个区域对应分别是:资源区、工作区、控制台
资源区
名称 | 描述 |
---|---|
Page | 展示当前Web页面所包含的资源文件 (图片、CSS样式表、JS脚本等)。在这里对工作区中的代码进行修改并不会保留,刷新页面就会重置 |
Filesystem | 当我们的Web页面在本地时,我们就可以通过Filesystem选项卡,将本地项目文件夹添加到DevTools的工作区,以直接将对页面的修改保存到本地,还提供对本地文件进行管理(添加文件、删除文件、修改文件等)。所以也就可以让我们一边调试,一边修改源代码,而无需在本地和DevTools来回切换 |
Overrides | 当我们的Web页面在本地时,我们就可以通过Filesystem选项卡,将本地项目文件夹添加到DevTools的工作区,以直接将对页面的修改保存到本地,还提供对本地文件进行管理(添加文件、删除文件、修改文件等)。所以也就可以让我们一边调试,一边修改源代码,而无需在本地和DevTools来回切换 |
Content script | 用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间(这里的JS脚本共享页面DOM与消息机制,与页面的JS脚本互相不知道对方的存在,无法访问对方的变量和函数) |
Snippets | 翻译过来就是片段,可以在这里创建代码片段,并独立运行和调试,刷新页面不会丢失 |
工作区
点击行号可以添加/移除断点,在断点上打开右键菜单可以禁用断点,以及设置断点触发条件进行编辑(比如可以设置断点在程序循环多少次后触发)
控制区
这里提供有调试操作按钮,以及一些调试信息的显示,顶部的几个按钮便是调试代码的核心按钮
上图调试按钮红框内,从左到右,各个图标表示的功能分别为:
名称 | 描述 |
---|---|
Pause/Resume script execution | 暂停/恢复脚本执行(程序执行到下一断点停止) |
Step over next function call | 执行到下一步的函数调用(跳到下一行)。 |
Step into next function call | 进入当前函数。 |
Step out of current function | 跳出当前执行函数 |
Deactive/Active all breakpoints | 关闭/开启所有断点(不会取消) |
Pause on exceptions | 异常情况自动断点设置 |
下面我们介绍一下调试按钮下面的各项功能
名称 | 描述 |
---|---|
Watch | 跟踪监控变量,点击"+"号添加变量名。 |
Call Stack | 函数调用栈,显示执行路径 |
Scope | 查看属性作用域 |
Beakpoints | 查看属性作用域 |
XHR/fetch Breakpoints | 当XHR的请求URL包含某一特定的字符串时所触发的断点 |
DOM Breakpoints | 当改变一个节点或其子元素时所触发的断点 |
Global Listeners | 全局监听器,绑定在 window 对象上的事件 |
Event Listener Breakpoints | 事件发生时所触发的断点 |
调试技巧
格式化代码
—end