面试官问：在日常的开发中，你是如何调试代码的？

面试官： 在平常的开发中，你是如何调试代码的？

你的大脑哈哈大笑，console.log 呀，哈哈哈，面试的时候你敢这么说吗？这太low了吧。

脑海里展现出：上次看到一个同事，在vscode上打了断点，都不用进浏览器，他就知道了bug是啥，但是他是咋办到的呢？早知道当时就该请他喝奶茶的呀，哎！现在好了，咋办？难道他说的是浏览器调试吗？这个我知道呀，不就是console.log么，在 F12 里面的 console 里看有没有报错。还有呢？哇偶，还有source，但是source里面堆栈闭包，我全部看不懂，咋说呀？

呜呜呜。。。

你回答： 我我我，用的是vscode的断点调试。

那你能给我详细说下你是怎么操作的吗？

你头顶上方飘过一万个草泥马，对呀？开发几年居然只有一年的工作经验，是不是真的好 low ？console.log 有漏洞，what？这怎么可能？我都用着这么多年了我咋不知道？这 TM 就是个奇葩面试官，不要我拉倒，老子还不想去你家呢，什么玩意！

骂归骂？但是调试这件事还是要认真对待一下的，是不是？前端调试有三种：

• console.log

• 浏览器的开发者工具

• VScode的debugger模式

这三种方法你都会了，就可以不用往下看了，直接移步小视频娱乐娱乐，当然你也可以跳着看，缺啥补啥呗！

1.console.log

这个我就不用说了呀，我开始学代码的时候，老师教我的调试工具是 alert(),后买你升级了一下，变成了console.log，他俩就是每个前端开发者的初恋，青春羞涩懵懂，美好，感觉这辈子我能和它幸福终身。

走着走着你发现，写一段代码，写一个console.log，然后还得刷刷浏览器去看看，到底值是啥？

有时候报错了，还看不出来是第几句错了，妈呀？我这初恋咋没长进呀，我都走远了，它依旧是当初那个我要代表月亮消灭你的美少女。

如果和她长久下去，我这辈子注定 11 点之前回不了家了。难呀，路漫漫其修远兮，我得跑路了。

2. F12

接下来我们要邂逅得大美女可不一般，他是财阀 chrome 得独生女，一听就是给大洋马，金发碧波大美女，这么好得美女，但是你不懂她，他就不鸟你呀，重点学习如下：

调试得关键就是找源码，打断点，找堆栈

local就是堆栈信息，你存得数据都在她里面。只需要操作右上角得那几个按钮，你就能完美得执行你的组件代码了，但是做这一切的前题是你要能映射到源码，还有一个弊端是每次都得切换到浏览器里面来调试。我觉得太累了，这也是我每天要干到11点才能完工的原因所在。我想啥呢，有没有办法能直接在Vscode里面调试？

3.VScode 的 debugger 模式

首先要说明的是vscode，既能调试前端 js 代码又能调试 node 代码，区别在于他们的配置不同，大部分前端同学是不写node的，所以今天主要写 react 的调试，vue 也雷同。

1.看图点击vscode 的debugger

2.启动debugger

如果3001的端口已经占用，可能会报错，你先把之前启动的页面给关闭了再run

是不是出现了和浏览器一模一样的按钮，按钮功能都一样，我就不一一介绍了，无非就是前进前进前进呗，不知道就看看浏览器调试那边的介绍吧。打断点，然后刷新页面

在代码打个断点，然后点击  刷新：

代码会执行到断点处断住，本地和全局作用域的变量，调用栈等都会展示在左边：

异常断点在这里

看起来和 Chrome DevTools 里调试差不多，只要你会用浏览器的调试，就一定会用vscode的调试，优点就是不用切换页面了，如果你有两个显示屏，那我只能说兄弟你用哪个调试都可以。如果你只有一个显示屏呢？而且还是笔记本的小屏，你还会牛逼哄哄的和我抬杠吗？

赶紧开干吧，难怪找不到女朋友，就是因为你每天加班到很晚，没有时间陪女朋友呀，所以她去找了她的男闺蜜，为你的尊严，还是多学点骚技术吧！他是你提前下班的利器和装逼的手段。

首先我要告诉你的是，你依旧忘不掉的初恋，一直都在，她打印出来的信息在这里。

当操作右上角的调试按钮的时候，代码会一行一行的向下执行，而且在左侧的 VARIABLES 里会出现 local ，它就函数的调用栈，它里面存放了这个函数的所有变量及他们的值，closure 是函数的闭包，global 是全局变量

是不是一目了然了？

咋办？如果你还不能忘记的你的初恋情人咋办？你可以在当前断点的组件下面的debugger console 里面写console.log("我忘不了的初恋情人，你在哪里？") 回车，他就出现在了你的面前。

各位客官，千万别吐槽我的粗鄙的测试代码。

你不妨想下，这么多年，你看了那么多写得高大上的完美案例，你学会了什么？

你看了那么多年的美女图片，每天被花里胡哨得衣服和妆容吸引，你看出个名堂了么？

为啥？

其实本质很简单，就是有人为了凸显自己的厉害，把他包装的我们看不懂了，给你的错觉就是，明明我看明白了呀，咋一上手就废了？所以我就要用粗鄙的代码说清楚，人人都能上手的技术。如有意见或者建议，评论区见呀！

4.click-to-react-component

当我们接手了一个项目以后，你如何能够快速定位到要修改的文件呢？你是要用搜索文案的方式吗？还是搜索class的方式？

当我们搜索文案的时候，由于页面上做了国际化，你要先找到zh-CN.json，然后再找到文案对应的key，根据key去搜索，这个时候，或许会出现很多，使用了这个key的文件，你的内心一定很焦躁，你一个一个筛选后，发现都不是，一万个草泥马在头顶飘过，真讨厌，又耽误老娘下班回家带娃了。

你还别说现在就有一款组件，可以帮你快速定位组件，要多爽，就有多爽！

4.1 安装

npm i click-to-react-component -D

4.2 配置

4.3调试

打开页面，alt+鼠标左键，直接进入vscode对应的组件里面来。

打开页面，alt+鼠标右键，显示组件，你可以选择要进入的地方

一进来，它连代码具体的位置都告诉你了，我简直是爱死你了