前言
不知道你是不是有这样的苦恼。
定位代码麻烦
我们需要修复很久以前开发的功能或者说刚接手一个别人写过的项目，里面内容庞杂，非常难以定位到想要的代码位置。
这个时候我们通常为了定位代码，先点开页面对应的功能，然后检查元素，复制class类名或者某个字符串然后再vscode里面搜索，依次来找到对应的代码。
每次需要知道某个变量的值用console.log打印
这是我们调试过程中经常干的事情。
如果项目优化很难受，每次热更新都要半天，console.log无疑是灾难级别的体验。在调试的过程中要不断的切换打印的变量，和保存热更新项目，非常浪费时间。
不过没关系，看了这篇文章，你对调试代码逻辑和定位的代码的效率将会提升100%。
话不多说直接开始！
正文
LocatorJS - click on any component to go to code.
在浏览器中能够直接点击对应的UI组件位置就能跳转到IDE中代码所在的地方
支持以下框架
- React
- Preact
- Solid
- Vue
- Svelte
使用DEBUG来开发你的代码
这个技巧不得不感谢掘金小册作者
他的调试秘籍从如何配置vscode调试配置再到各种特殊的调试技巧，让我受益匪浅，我是非常推荐大家去买来看看，毕竟调试神功一旦学会，很多以前觉得很难读的代码会变得更简单一些。
不过有些技巧在实际中用的比较少，如果单纯从项目开发上来说的话，我认为其中两个debug技巧非常值得所有人知道。
点击红框框住的就是vscode debug模块
点击Run and Debug
选择自己使用的浏览器，这里建议调试浏览器和你的主流浏览器分开，比如你使用的是chrome，可以用edge（早已切换成google内核）调试。
完成后会有这么一个配置文件
它其实在.vscode文件下面
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome", // 调试的类型，浏览器有edge和chrome，还可以设置为nodejs
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000", // 修改成你自己的port
"userDataDir": false,
"webRoot": "${workspaceFolder}"
}
]
}
这个配置文件我们主要看userDataDir是干嘛的。
userDataDir是一个boolean值，如果为true就会打开一个类似的匿名浏览器，原理就是不和原本的浏览器共享一个用户文件夹（缓存和浏览器插件都在这个里面），如果为false就共享浏览器原本的用户文件夹（使用安装好的的插件和原本缓存的表单数据什么的）
不过这里要注意，如果设置为false，你打开的浏览器是不能提前启动的，必须第一个启动窗口是debug启动的窗口。
最后点击运行debug，就会自动打开的浏览器并且访问对应的url（项目必须要启动哈）
右键点击我们平时打断点的位置就会出现这三个debug的模式
-
第一个我就不必多说普通的debug
-
LogPoint 你的第二个console.log
前言里面已经提到过，我们在调试代码的时候最喜欢的就是console.log打印变量来调试，而LogPoint能在不修改代码的前提下打印变量的值。
点击右键添加LogPoint ,里面特殊的语法就是{}表示的取变量，没有被{}包围的就表示普通的字符串
打印的消息可以同时被这两个地方看见
-
Condition BreakPoint
如果我需要某个特定条件下在某个地方停下做断点调试，以前的我会写一个if语句然后console.log打印，现在我只需要添加一个条件判断断点就可以了。
使用方式如下
一句是普通的Javascript条件语句
我在B站做了一个视频演示了这三个技巧，如果有兴趣可以去看看
