调试js(Js常用调试技巧)

一、Js常用调试技巧

JavaScript常用调试技巧包括使用console.log()进行输出、使用断点进行调试、使用调试器进行调试、使用try-catch语句进行错误处理、使用浏览器的开发工具进行调试等。

在使用console.log()时，需要注意输出信息的准确性和多样性；在使用断点和调试器时，需要掌握相关的快捷键和调试技巧；在使用try-catch语句时，需要对不同的错误类型进行分类处理；在使用浏览器开发工具时，需要掌握DOM操作、样式调试、网络分析等相关功能。综上所述，熟练掌握以上调试技巧能够极大提高开发效率和代码质量。

二、vscode如何调试js

在VSCode中调试JavaScript代码，可以通过以下步骤进行：

1.首先，确保已经安装了Node.js，因为VSCode内置的调试器需要Node.js环境。

2.在VSCode中，打开要调试的JavaScript文件。

3.按下`F5`键或者选择左上角的`Run`菜单，然后选择`StartDebugging`来启动调试。

4.VSCode会自动运行JavaScript代码并在浏览器中打开一个新窗口来展示调试结果。

5.在代码中添加断点。要添加断点，只需在要暂停执行的代码行左侧点击即可。

6.开始调试。按下`F5`键或者选择`Run`菜单中的`StartDebugging`选项。VSCode会暂停在第一个断点处，并在浏览器中打开一个新窗口来展示调试结果。

7.使用`F10`键或者`Shift+F10`键来继续执行代码，或者使用`StepOver`键（`F11`键）来逐步执行代码并查看变量值。

8.在调试过程中，可以在`DebugConsole`面板中查看输出的调试信息，包括变量值、堆栈跟踪等。

9.如果需要更改调试设置，可以在`.vscode`文件夹中的`launch.json`文件中进行配置。例如，可以更改启动浏览器的方式、设置环境变量等。

通过以上步骤，您可以在VSCode中调试JavaScript代码。需要注意的是，VSCode内置的调试器仅支持在浏览器中调试JavaScript代码，如果您需要在Node.js环境中调试，可以考虑使用像`DebuggerforChrome`这样的扩展插件。

三、css调试工具

css说是调试工具其实只是一段Javascript代码，但非常实用，它会给页面里所有的DOM元素添加一个1px的描边（outline），方便我们在调试CSS过程中分析、排查问题。

先来看看代码，它有两个版本，一个是使用的$$选择器，代码量更少（浏览器控制台支持$$选择器）；另一种就是传统的document.querySelectorAll选择器：