学习前端开发中的JS调试技巧(断点)，一次违反常规的前端大厂面试经历最后在面试前我花了三个月时间刷了很多大厂面试题，

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

HTML5新特性，语义化
浏览器的标准模式和怪异模式
xhtml和html的区别
使用data-的好处
meta标签
canvas
HTML废弃的标签
IE6 bug，和一些定位写法
css js放置位置和原因
什么是渐进式渲染
html模板语言
meta viewport原理

开源分享：docs.qq.com/doc/DSmRnRG…

Sources断点

假设我现在就是要验证一下：函数传入的两个数、被加的随机数，以及最终的总和。那么该怎么操作呢？

方法一

在这里插入图片描述

从上图发现，我们在代码中新增了三行console代码，用以打印我们关心的数据变量，而最终我们从控制台（Console面板）中的输出结果，可以很清楚的验证整个计算过程是否正常，进而达到我们题设的验证要求。

方法二，方法一的验证过程存在很明显的弊端就是，添加了很多冗余代码，接下来我们看一下使用断点进行验证，是否更加方便，先看一个如何加断点，以及断点后是什么效果：在这里插入图片描述

如图，给一段代码添加断点的流程是

“F12（Ctrl + Shift + I）打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证要求。

那问题来了，仔细的朋友会发现当我的代码执行到断点的时候，显示的变量a和b的值是已经进行过加法运算后的，我们看不到调用sum函数时初始传入的10和20。那么该怎么办呢？这就要回过头来先学习一下断点调试的一些基础知识了。我们打开Sources面板后其实会在界面中看到如下内容，我们跟着鼠标轨迹逐一看看都是什么意思：在这里插入图片描述

从左到右，各个图标表示的功能分别为：

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：异常情况自动断点设置。

到此，断点调试的功能键介绍得差不多了，接下来我们就可以一行一行去看我们的程序代码，查看每一行执行完毕之后，我们各个变量的变化情况了，如下图所示：

如上，我们可以看到a、b变量从最初值，到中间加上随机值，再到最后计算总和并输出最终结果的整个过程，完成题设验证要求不在话下。

其余几个功能键，我们稍微改动一下我们的测试代码，用一张gif图来演示他们的使用方法：在这里插入图片描述

Debugger断点

所谓的Debugger断点，其实是我自己给它命名的，专业术语我也不知道怎么说。具体的说就是通过在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。接下去的操作就跟在Sources面板添加断点调试几乎一模一样，唯一的区别在于调试完后需要删除该语句。

既然除了设置断点的方式不一样，功能和Sources面板添加断点效果一样，那么为什么还会存在这种方式呢？我想原因应该是这样的：我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点，此时”debugger;”就发挥作用了。我们直接通过gif图看看他的效果：在这里插入图片描述