前端网页开发debug调试基础技巧-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端网页开发debug调试基础技巧。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Google Chrome 浏览器提供了许多快捷键，以帮助用户更高效地浏览网页和使用浏览器功能。以下是一些常用的Chrome快捷键：

Ctrl + T (Windows/Linux) / Cmd + T (Mac): 打开新标签页
Ctrl + N (Windows/Linux) / Cmd + N (Mac): 打开新窗口
Ctrl + Shift + N (Windows/Linux) / Cmd + Shift + N (Mac): 打开隐身模式窗口
Ctrl + W (Windows/Linux) / Cmd + W (Mac): 关闭当前标签页
Ctrl + Shift + T (Windows/Linux) / Cmd + Shift + T (Mac): 重新打开最后关闭的标签页
Ctrl + Tab 或 Ctrl + PgDown (Windows/Linux) / Cmd + Option + Right Arrow (Mac): 切换到下一个标签页
Ctrl + Shift + Tab 或 Ctrl + PgUp (Windows/Linux) / Cmd + Option + Left Arrow (Mac): 切换到上一个标签页
Ctrl + 1 到 Ctrl + 8 (Windows/Linux) / Cmd + 1 到 Cmd + 8 (Mac): 跳转到指定位置的标签页
Ctrl + 9 (Windows/Linux) / Cmd + 9 (Mac): 跳转到最后一个标签页

Alt + Left Arrow (Windows/Linux) / Cmd + [ (Mac): 后退
Alt + Right Arrow (Windows/Linux) / Cmd + ] (Mac): 前进
F5 或 Ctrl + R (Windows/Linux) / Cmd + R (Mac): 刷新当前页面
Ctrl + F5 或 Ctrl + Shift + R (Windows/Linux) / Cmd + Shift + R (Mac): 强制刷新当前页面（忽略缓存）
Esc: 停止加载当前页面
Ctrl + L (Windows/Linux) / Cmd + L (Mac): 聚焦到地址栏
Ctrl + D (Windows/Linux) / Cmd + D (Mac): 将当前网页添加到书签
Ctrl + J (Windows/Linux) / Cmd + J (Mac): 打开下载页面
Ctrl + H (Windows/Linux) / Cmd + H (Mac): 打开历史记录页面

Ctrl + Shift + B (Windows/Linux) / Cmd + Shift + B (Mac): 显示或隐藏书签栏
Ctrl + Shift + J (Windows/Linux) / Cmd + Option + J (Mac): 打开开发者工具
Ctrl + Shift + Delete (Windows/Linux) / Cmd + Shift + Delete (Mac): 打开“清除浏览数据”对话框
F12: 打开开发者工具

使用右键菜单：
- 在页面上，将鼠标指针移动到你想要检查的元素上。
- 右键点击该元素，这将打开一个上下文菜单。
- 在菜单中选择“检查”或“Inspect Element”选项。这个选项的确切名称可能因浏览器而异。
查看开发者工具：
- 选择“检查”后，浏览器的开发者工具将会打开，并且自动高亮显示你右键点击的元素在“Elements”（元素）面板中的代码。
- 在“Elements”面板，你可以查看和编辑HTML元素和CSS样式。任何对元素所做的更改都会实时反映在浏览器视图中，但请注意，这些更改只是临时的，刷新页面后会丢失。

console.log(abc)
console.error(abc)
console.warn(abc)

console.group('group A')
console.log(a)
console.log(b)
console.groupEnd('group A')

console.time() 
let sum 0;
for(let i=0; i<=999; i++){
	sum +=i;}
console.timeEnd()

console.table([{number:1,name:'John'},{number:2,name:'Sarah'}])

转到Sources面板：
在开发者工具中，切换到“Sources”面板。这里显示了网站的文件结构，包括所有加载的JavaScript文件。
找到要调试的代码文件：
在“Sources”面板中，浏览或搜索到你想要调试的JavaScript文件，并打开它。
设置断点：
在代码中找到你想要暂停执行的行。点击行号旁边的空白区域可以设置一个断点。设置断点后，该行号旁边会出现一个蓝色（或红色，具体颜色取决于浏览器）的标记。

执行代码：
当你的网页运行并执行到断点所在的代码行时，浏览器会自动暂停执行。
检查变量和状态：
在代码暂停执行时，你可以查看和修改作用域中的变量值，检查调用栈，以及查看当前执行环境的状态。
控制执行流程：
使用开发者工具中的调试控制按钮来控制代码的执行。你可以逐行执行（Step Over），进入函数（Step Into），跳出函数（Step Out），或继续执行直到下一个断点（Resume）。
观察行为和输出：
在逐步执行代码时，观察应用的行为和控制台的输出，以帮助理解代码的执行流程和发现问题。

下载安装 VSCode 。
下载安装 node.js 。
node.js 用来执行 JS 代码和安装第三方库。
VSCode 安装 Live Server 插件，右键点击 html 文件可以打开默认浏览器来调试。
也可以 Ctrl + Shift + P 打开命令面板，输入 Debug: Open Link，再输入地址如 http://127.0.0.1:5500/index.html，之后可以直接在 VSCode 中调试。