前端开发调试之 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

相关推荐
LCG元12 分钟前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian13 分钟前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼19 分钟前
【前端知识】常用CSS样式举例
前端·css
山茶花开时。22 分钟前
[SAP ABAP] 静态断点的使用
开发语言·sap·abap
纠结哥_Shrek22 分钟前
Java 有很多常用的库
java·开发语言
wl851124 分钟前
vue入门到实战 三
前端·javascript·vue.js
ljz201636 分钟前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌1 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构
傻小胖1 小时前
vue3中Teleport的用法以及使用场景
前端·javascript·vue.js
加油,旭杏1 小时前
【go语言】函数
开发语言·后端·golang