前端网页开发debug调试基础技巧

目录

• • Chrome 浏览器常用快捷键
  • • 标签页和窗口管理
    • 网页浏览
    • Chrome工具
    • 文本编辑
    • 检查元素
    • • 使用浏览器“检查”功能
      • 其他查询方式
      • 控制台
      • • 常用 Log 方法
        • 断点调试
        • • 如何设置断点
          • 断点调试过程
          • 断点类型
          • VSCode 调试
          • 参考

            Chrome 浏览器常用快捷键

            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): 打开历史记录页面

                Chrome工具

                • 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: 打开开发者工具

                  文本编辑

                  • Ctrl + Shift + V (Windows/Linux) / Cmd + Shift + V (Mac): 粘贴为纯文本

                    检查元素

                    使用浏览器“检查”功能

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

                    其他查询方式

                    • 文本查询
                      • CTRL+F (Windows)
                      • Command+F (MAC)
                      • css选择器
                      • Xpath
                      • Console
                        • inspect(element)

                          控制台

                          • $_ 上一条语句
                          • $0 上一个选择的DOM节点（$1, $2…）

                            常用 Log 方法

                            • 级别

                              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; isum +=i;}console.timeEnd()number:1,name:'John'},{number:2,name:'Sarah'}])