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

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

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 + TabCtrl + PgDown (Windows/Linux) / Cmd + Option + Right Arrow (Mac): 切换到下一个标签页
  • Ctrl + Shift + TabCtrl + PgUp (Windows/Linux) / Cmd + Option + Left Arrow (Mac): 切换到上一个标签页
  • Ctrl + 1Ctrl + 8 (Windows/Linux) / Cmd + 1Cmd + 8 (Mac): 跳转到指定位置的标签页
  • Ctrl + 9 (Windows/Linux) / Cmd + 9 (Mac): 跳转到最后一个标签页

网页浏览

  • Alt + Left Arrow (Windows/Linux) / Cmd + [ (Mac): 后退
  • Alt + Right Arrow (Windows/Linux) / Cmd + ] (Mac): 前进
  • F5Ctrl + R (Windows/Linux) / Cmd + R (Mac): 刷新当前页面
  • Ctrl + F5Ctrl + 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”选项。这个选项的确切名称可能因浏览器而异。
  2. 查看开发者工具
    • 选择“检查”后,浏览器的开发者工具将会打开,并且自动高亮显示你右键点击的元素在“Elements”(元素)面板中的代码。
    • 在“Elements”面板,你可以查看和编辑html元素和css样式。任何对元素所做的更改都会实时反映在浏览器视图中,但请注意,这些更改只是临时的,刷新页面后会丢失。

其他查询方式

  • 文本查询
    • CTRL+F (Windows)
    • ***mand+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; i<=999; i++){
	sum +=i;}
console.timeEnd()
  • 表格
console.table([{number:1,name:'John'},{number:2,name:'Sarah'}])

断点调试

如何设置断点

  1. 转到Sources面板
    在开发者工具中,切换到“Sources”面板。这里显示了网站的文件结构,包括所有加载的JavaScript文件。

  2. 找到要调试的代码文件
    在“Sources”面板中,浏览或搜索到你想要调试的JavaScript文件,并打开它。

  3. 设置断点
    在代码中找到你想要暂停执行的行。点击行号旁边的空白区域可以设置一个断点。设置断点后,该行号旁边会出现一个蓝色(或红色,具体颜色取决于浏览器)的标记。

断点调试过程

  1. 执行代码
    当你的网页运行并执行到断点所在的代码行时,浏览器会自动暂停执行。

  2. 检查变量和状态
    在代码暂停执行时,你可以查看和修改作用域中的变量值,检查调用栈,以及查看当前执行环境的状态。

  3. 控制执行流程
    使用开发者工具中的调试控制按钮来控制代码的执行。你可以逐行执行(Step Over),进入函数(Step Into),跳出函数(Step Out),或继续执行直到下一个断点(Resume)。

  4. 观察行为和输出
    在逐步执行代码时,观察应用的行为和控制台的输出,以帮助理解代码的执行流程和发现问题。

断点类型

  • 普通断点:在特定的代码行上设置,当执行到该行时暂停。
  • 条件断点:只有当满足特定条件时才会在代码行上暂停。
  • DOM断点:当选定的DOM元素发生变化时暂停。
  • XHR断点:当发起特定的XMLHttpRequest(或更广泛的网络请求)时暂停。
  • 事件监听器断点:当特定事件被触发时暂停。

VSCode 调试

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

参考

chrome_dev_tools

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端网页开发debug调试基础技巧

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买