分享几个前端开发调试的技巧

一、console.log( )

最简单粗暴的方法就是在控制台打印输出查看结果

二、debugger

在需要调试的代码前写上 debugger

三、vscode 提供的调试

1、本地启动项目，得到项目的 url 地址

2、创建 launch.json 文件

• 点击VS Code侧边栏的调试图标（通常是一个小虫子），或者使用快捷键Shift + Command + D（Windows是Shift + F9）。
• 点击 创建 launch.json 文件，在调试视图中，选择你的调试器

3、启动调试

将 launch.json 文件中的 url 替换成项目的 url ，给需要调试的代码打上断点，点击启动图标即可进行调试

四、浏览器中进行调试

1、定位代码

比如说想调试 layout 文件夹下 siderMenu.tsx 里的代码

方法一：通过浏览器提供的搜索功能对代码进行搜索

方法二：在源代码/来源处定位到源代码

不过代码一般都是经过打包后的，直接找的话比较难找到

Mac 可以通过 command + P 快捷键，打开搜索文件的窗口，直接输入文件名打开对应的文件，然后再定位到想要调试的代码

方法三：console.log( )

在想要调试的代码处，随便输出点内容，点击蓝色字体也可以跳转至源文件处

2、打断点，刷新页面即可调试