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

相关推荐
!win !3 分钟前
uni-app项目跑APP报useStore报错
前端·uni-app
拾光拾趣录5 分钟前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
渣渣盟17 分钟前
JavaScript核心概念全解析
开发语言·javascript·es6
huxihua20061 小时前
各种前端框架界面
前端
拾光拾趣录1 小时前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam1 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
java叶新东老师1 小时前
goland编写go语言导入自定义包出现: package xxx is not in GOROOT (/xxx/xxx) 的解决方案
开发语言·后端·golang
拾光拾趣录1 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
檀越剑指大厂2 小时前
【Python系列】Flask 应用中的主动垃圾回收
开发语言·python·flask
拾光拾趣录2 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript