前端开发调试之 PC 端调试

以下内容来自稀土掘金青训营课程

bug 与 debug

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑,浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则

console

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table 具像化的展示SON和数组数据
  • console.dir 通过类以文件树的方式展示对象的属性
  • 占位符:给日志添加样式,可以突出重要的信息 %s:字符串占位符;%o:对象占位符,%c:样式占位符;%d:数字占位符

source tab

performance

示例:https://googlechrome.github.io/devtools-samples/jank/

lighthouse

相关推荐
定栓7 分钟前
Webpack迁到Vite第四节:SVG 图标系统
前端·webpack·node.js
qetfw12 分钟前
Bash 内置与外部命令:type、command 与 builtin 验证
linux·开发语言·bash
Dovis(誓平步青云)15 分钟前
车辆进入隧道后信号断开,座舱旅程怎样补回事件
java·开发语言·前端·数据库·电脑
Wzx19801220 分钟前
Python Agent 短期记忆设计:从对话历史到 LangGraph Checkpointer
开发语言·python
定栓22 分钟前
Webpack迁到Vite第六节:构建配置详解(vite.config.js)
前端·javascript·webpack
风骏时光牛马32 分钟前
从零到精通AI全栈学习路线
前端
gopher951136 分钟前
RUST:错误处理 thiserror 详解
开发语言·后端·rust
破茧蝴蝶9 小时前
Python分布式爬虫完整教程
开发语言·python
Autumn_ing9 小时前
Design.md生成UI怎么验收?举例运营后台的颜色、状态和数据核对
前端·ui·ai·设计系统·paico·ai生成ui·design.md