浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!

各个面板的功能介绍

    打开Dev Tool 快捷键 F12

常用Tab中的Element

    给元素添加样式 让:hover常驻 悬停 编辑class 复制样式 观察flex布局 观察grid布局

常用Tab中的Console

快捷键 ctrl+shift+J

    执行语句 $_ 返回上一条语句的执行结果 $0 上一个选择的DOM结点 console.log() 常用:error warn table clear group time log级别筛选 监测某个变量

常用Tab中的Source

参考 JS调试

常用Tab中的Network

常用Tab中的Application

    Local Storage Session Storage Cookies

CSS调试

    网页元素,右键检查,即可看到右边元素
    查询DOM树 Elements面板 查询方式:Ctrl+F 搜索
  1. 直接文字搜索 例如
  2. css选择器搜索 例如 section#section_one
  3. xpath搜索 例如 //section/p
    Console 定位到元素节点:inspect(element) 例如:inspect(document.getElementById(‘est_en’))

JS调试

    代码中写debugger 精准定位和调试 Sources中打断点 Enable code folding 折叠代码 Elements中元素发生改变的时候 断点调试 事件监测断点 Sources-Event Listener Breakpoints 忽略源代码调试 Sources-Call Stack - add script to ignore list

一些小技巧

网络

查询到ajax请求信息,如果是每秒定时器,那每秒都有信息提示。

渲染

F12顶上设置-渲染-突出显示绘制区域 配置后,当数据进行刷新渲染的时候,元素呈现绿色框

经验分享 程序员 微信小程序 职场和发展