前端chrome浏览器调试总结

看了一篇文章,结合本身实习的经历,以为文章说得很是好,转载记录一下。

文章内容来源: 简书–cayley的编程之路

1、前言

转载博主说:初学者仅仅掌握了alert、console这些基本的调试方法。

我刚自学前端初期的时候,也是只用这种方法调试,天真地之后全部调试均可以经过console解决。后面去公司实习,看大佬们调试页面,这边打个断点,那边记录一下,立刻就把问题定位出来了。确实,学会浏览器调试工具真的能大大提升本身的工做效率,尤为是在大项目的处理过程当中。

2、调试工具

1. Elements

先来看这张图最上头的一行是一个功能菜单，每个菜单都有它相应的功能和使用方法，依次从左往右来看

箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当咱们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态

设备图标：点击它能够切换到不一样的终端进行开发模式，移动端和pc端的一个切换，能够选择不一样的移动终端设备，同时能够选择不一样的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是很是好的选择

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

灰色的element.style样式一样能够进行添加和书写，惟一的区别是，在这里添加的样式是添加到了该元素内。

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

2. Console控制台：

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

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

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

3. Sources:

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

转换成可读格式的代码:

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

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

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

Content scripts:
Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这些文件也是嵌入在页面中的资源，这类文件能够读写和操做咱们的资源，须要调试这些扩展文件，则能够在这个目录下打开相关文件调试，可是几乎咱们的项目尚未相关的扩展文件，因此啥也看不到，平时也不须要关心这块

4. Network:

网络请求标签页：能够看到全部的资源请求，包括网络请求，图片资源，html,css，js文件等请求，能够根据需求筛选请求项，通常多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

以上我选择了All，就会把该页面全部资源文件请求下来，若是只选择XHR 异步请求资源，则咱们能够分析相关的请求信息

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

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

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

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

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

第一个框里是概述，这里能够大体看到页面的性能。

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

第三个框里表示存储

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

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

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

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

以上内容来源chrome开发者工具浅析--timeline

5. Memory(旧版为Profiles):

会列出全部的资源，以及HTML5的Database和LocalStore等，你能够对存储的内容编辑和删除 不作过多介绍

6. Security

能够告诉你这个网站的安全性，查看有效的证书等

7. Application(旧版为Resources)

会列出全部的资源，以及HTML5的Database和LocalStore等，你能够对存储的内容编辑和删除 不作过多介绍

8. Audits

能够帮你分析页面性能，有助于优化前端页面，分析后获得的报告

3、 断点调试

1. 如何调试

调试js代码，确定是咱们经常使用的功能，那么如何打断点，找到要调试的文件，而后在内容源代码左侧的代码标记行处点击便可打上一个断点

2. 断点与 js代码修改

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

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

在当前的代码执行区域，在调试中若是发现须要修改的地方，也是能够当即修改的，修改后保存便可生效，这样就免去了再到代码中去书写，再刷新回看了

3. 快速进入调试的方法

当咱们的代码执行到某个程序块方法处，这个方法上可能你并无设置相关的断点，此时你能够F11进入此程序块.

可是每每咱们的项目都是通过不少源代码封装好的方法，有时候进入后，会走不少底层的封装方法，须要不少步骤才能真正进入这个函数块.

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

4. 调试的功能区域

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

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

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

Breakpoints关于断点：全部当前js的断点都会展现在这个区域，你能够点击按钮用来“去掉/加上”此处断点，也能够点击下方的代码表达式，调到相应的程序代码处，来查看

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

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

当要给DOM添加断点的时候，会出现选择项分别是以下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中以后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 作相应修改时，代码就会在那里停下来

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

做者：Cayley硕儿
连接：https://www.jianshu.com/p/b25c5b88baf5 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。