前端chrome浏览器调试总结

摘要:
以下选项允许您选择要捕获的项目。

一、调试工具

1、Elements

先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看
前端chrome浏览器调试总结第1张
箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态

设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择
前端chrome浏览器调试总结第2张

Element内容:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息。
下图我们可以看到当我鼠标选择id为lg_tar的div元素时,右侧的css样式对应的会展示出此id的样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效。

前端chrome浏览器调试总结第3张

灰色的element.style样式同样可以进行添加和书写,唯一的区别是,在这里添加的样式是添加到了该元素内。

同时,当我们浏览网站看到某些特别炫酷的效果和难做的样式时候,打开这个功能,我们即可看到别人是如何实现的,学会它这知识就是你的了,仔细钻研也会有意想不到的收获

前端chrome浏览器调试总结第4张

2. Console控制台:

用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能,下面简单介绍几个:

一些对页面数据的指令操作,比如打断点正好执行到获取的数据上,由于数据都是层层嵌套的对象,这个时候查看里面的key/value不是很方便
即可用这个指令开查看,obj的json string 格式的key/value,我们对于数据里面有哪些字段和属性即可一目了然

前端chrome浏览器调试总结第5张

除了console.log还有其他相关的指令可用

前端chrome浏览器调试总结第6张

3. Sources:

js资源页面:这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,在我还没有走出校园时候,我经常看一些大站的js代码,那时候其实基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式,所有的代码都是压缩之后的.
我们可以点击下面的{}大括号按钮将代码转成可读格式
文件原压缩的代码:

前端chrome浏览器调试总结第7张

转换成可读格式的代码:

前端chrome浏览器调试总结第8张

Sinppets:
比如当我们想不起某个方法的具体使用时候,会打开控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码.

所以推荐使用Sources下面的左侧的Sinppets代码片段按钮这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息

新建了一个名叫:app.js的片段代码,在你的项目环境页面内,该片段可执行项目内的方法

前端chrome浏览器调试总结第9张

Content scripts:
Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们的项目还没有相关的扩展文件,所以啥也看不到,平时也不需要关心这块

前端chrome浏览器调试总结第10张

4. Network:

网络请求标签页:可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看

前端chrome浏览器调试总结第11张

以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息

前端chrome浏览器调试总结第12张

打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些,还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据

前端chrome浏览器调试总结第13张

5. Performance(旧版浏览器为Timeline):

时间表可以记录和运行分析应用程序所有的活动,为了使的记录页面的交互,打开时间轴面板,然后按开始录制录制按钮(),或者通过键入键盘快捷键Cmd的 +E(Mac)或按Ctrl +E(Windows / Linux版)。这个记录按钮会从灰色变成红色,而Timeline将开始从你的页面获取时间线(timeline)。在你的应用中完成一些操作,记录到一些数据之后,再一次点击按钮来停止记录。

前端chrome浏览器调试总结第14张

红色的点旁边是清除记录。后面的选项可以选择需要capture捕获的项。分别是网络,JS简介,截图,存储,描绘。

下图是一个任选的一个网页打开的时间表:

前端chrome浏览器调试总结第15张

第一个框里是概述,这里可以大致看到页面的性能。

第二个框里是event,即是事件监控。这是CPU的堆栈跟踪的可视化,绿色表示媒体时间,红色表示负载事件,蓝色表示DOM事件。

第三个框里表示存储

第四个框里是详细信息,这里会显示事件的详细信息。

CPU。CPU资源。此区域图指明了事件的类型消耗的CPU资源。

前端chrome浏览器调试总结第16张

上图可见加载时间0.02s,脚本15.68s,渲染时间11.28s,绘制时间46.06s,其他时间49.06s,空闲1.27s时间。

上图是总表。下图是详细汇总表。

前端chrome浏览器调试总结第17张

5. Memory(旧版为Profiles):

会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍

6. Security

可以告诉你这个网站的安全性,查看有效的证书等

7. Application(旧版为Resources)

会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍

前端chrome浏览器调试总结第18张

8. Audits

可以帮你分析页面性能,有助于优化前端页面,分析后得到的报告

二、 断点调试

1. 如何调试

调试js代码,肯定是我们常用的功能,那么如何打断点,找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点

前端chrome浏览器调试总结第19张

2. 断点与 js代码修改

看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,同时我们可以使用右侧的功能键进行调试.

右侧最上面一排分别是:暂停/继续(F8)、单步执行(新版浏览器F9、F10)、单步跳入此执行块(F11快捷键)、单步跳出此执行块(shift+F11)、禁用/启用所有断点。下面是各种具体的功能区

前端chrome浏览器调试总结第20张

在当前的代码执行区域,在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效,这样就免去了再到代码中去书写,再刷新回看了

前端chrome浏览器调试总结第21张

3. 快速进入调试的方法

当我们的代码执行到某个程序块方法处,这个方法上可能你并没有设置相关的断点,此时你可以F11进入此程序块.

但是往往我们的项目都是经过很多源代码封装好的方法,有时候进入后,会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块.

此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处

前端chrome浏览器调试总结第22张

4. 调试的功能区域

每一个功能区,都有它相关的左右,先来看一张图,它都有哪些功能

前端chrome浏览器调试总结第23张

Call Stack调用栈:
当断点执行到某一程序块处停下来后,右侧调试区的Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列,Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出,我们最先走了toggleTab这个方法,然后走到了一个更新对象的方法上,当前调用在哪里,箭头会帮你指向哪里,同时我们可以点击,调用栈列表上的任意一处,即可回头再去看看代码

前端chrome浏览器调试总结第24张

但是若你想从新从某个调用方法出执行,可以右键Restart Frame, 断点就会跳到此处开头重新执行,Scope 中的变量值也会依据代码从新更改,这样就可以回退来从新调试,错过的调试也可以回过头来反复查看

前端chrome浏览器调试总结第25张

Breakpoints关于断点:所有当前js的断点都会展示在这个区域,你可以点击按钮用来“去掉/加上”此处断点,也可以点击下方的代码表达式,调到相应的程序代码处,来查看

前端chrome浏览器调试总结第26张

XHR Breakpoints:
在XHR Breakpoints处,点击右侧的+号,可以添加请求的URL,一旦 XHR 调用触发时就会在 request.send() 的地方中断

前端chrome浏览器调试总结第27张

DOM Breakpoints::
可以给你的DOM元素设置断点,有时候真的需要监听和查看某个元素的变化情况,赋值情况,但是我们并是不太关心哪一段代码对它做的修改,只想看看它的变化情况,那么可以给它来个监听事件,这个时候DOM Breakpoints中会如图

前端chrome浏览器调试总结第28张

当要给DOM添加断点的时候,会出现选择项分别是如下三种修改:

(1)子节点修改

(2)自身属性修改

(3)自身节点被删除

选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来

Event listener Breakpoints:
最后Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断

免责声明:文章转载自《前端chrome浏览器调试总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Matlab高级教程_第二篇:Matlab相见恨晚的模块_02_并行运算-1xcode模拟器不显示键盘解决方案下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

机器学习环境配置系列六之jupyter notebook远程访问

jupyter运行后只能在本机运行,如果部署在服务器上,大家都希望可以远程录入地址进行访问,这篇文章就是解决这个远程访问的问题。几个基本的命令就可以搞定,然后就可以愉快的玩耍了。 1、安装jupytetr conda install jupyter 2、远程访问配置 jupyter notebook --generate-config jupass = '...

net WebApi中使用swagger

net WebApi中使用swagger 我在WebApi中使用swagger的时候发现会出现很多问题,搜索很多地方都没找到完全解决问题的方法,后面自己解决了,希望对于遇到同样问题朋友有帮助。我将先一步一步的演示项目中解决swagger遇到问题及解决方法。   首先我们新建一个api项目 图1 (默认生成项目) 图2(运行首页)   图3(默认Api列...

一起谈.NET技术,给大家分享两款正在使用的reflector插件 狼人:

  推荐两款神器:Deblector和reflexil   Deblector   它的名字是Debug 和 reflector 两个单词的结合。就是用来调试的。 简单的说,它可以像ide一样启动调试进程,或者Attach到一个运行中的进程,并调试他们,设置断点,单步运行,查看变量等等。 它不需要pdb文件,也不会像reflector pro的调试插件一样...

中兴iptv机顶盒破解教程图文:亲测中兴B760EV3、B860A、B860AV1.1完美安装应用!非ttl破解![转]

一直以为中兴的这几个盒子只能通过ttl来破解,不过现在再也不用这么麻烦了,有了这个工具,前后破解不超3分钟!理论上支持所有中兴的iptv机顶盒的破解! 亲测中兴B760EV3、B860A、B860AV1.1完美安装应用! 一、首先打开机顶盒,选择遥控器的“设置”,输入1000或6321进入; 二、找到网络设置,输入wifi密码,然后记录一下IP地址;...

C#之文件的读写(一)

整个系统的界面如下: 先上代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; usin...

调试JDK源码时可编辑操作的实现

目录 一、解压源码压缩包 二、创建Java项目 三、复制源码文件到文件夹 四、Platform Settings中新增一个SDK 五、修改新建SDK的 Sourcepath 配置 六、修改 Project 以及 Modules 的 SDK 七、项目结构图 八、测试调试过程中对源码进入注释 以下操作在以下环境中测试通过:idea 2019.3,jd...