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

参考视频

文章目录

    • 各个面板的功能介绍
        • 常用Tab中的Element
        • 常用Tab中的Console
        • 常用Tab中的Source
        • 常用Tab中的Network
        • 常用Tab中的Application
    • CSS调试
    • JS调试
    • 一些小技巧
      • 网络
      • 渲染

各个面板的功能介绍

  • 打开Dev Tool
    快捷键 F12

  • 打开命令菜单
    快捷键 ctrl+shift+P
    输入theme 可以切换light和dark theme;
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第1张图片
    输入screenshot 可以用来截图;
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第2张图片
    输入dock,选择调试器的位置;
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第3张图片

常用Tab中的Element

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

常用Tab中的Console

快捷键 ctrl+shift+J

  • 执行语句
  • $_ 返回上一条语句的执行结果
  • $0 上一个选择的DOM结点
  • console.log() 常用:error warn table clear group time
  • log级别筛选
  • 监测某个变量
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第4张图片

常用Tab中的Source

参考 JS调试

常用Tab中的Network

浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第5张图片
浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第6张图片

常用Tab中的Application

  • Local Storage
  • Session Storage
  • Cookies
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第7张图片

CSS调试

  • 网页元素,右键检查,即可看到右边元素

  • 查询DOM树
    Elements面板 查询方式:Ctrl+F 搜索
  1. 直接文字搜索 例如
  2. css选择器搜索 例如 section#section_one
  3. xpath搜索 例如 //section/p
  • Console
    定位到元素节点:inspect(element)
    例如:inspect(document.getElementById(‘est_en’))
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第8张图片

JS调试

  • 代码中写debugger 精准定位和调试
  • Sources中打断点
  • Enable code folding 折叠代码
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第9张图片
  • Elements中元素发生改变的时候 断点调试
  • 事件监测断点 Sources-Event Listener Breakpoints
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第10张图片
  • 忽略源代码调试 Sources-Call Stack - add script to ignore list
    浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第11张图片

一些小技巧

网络

查询到ajax请求信息,如果是每秒定时器,那每秒都有信息提示。
浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第12张图片

渲染

F12顶上设置-渲染-突出显示绘制区域
浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第13张图片
配置后,当数据进行刷新渲染的时候,元素呈现绿色框
浏览器调试工具精讲 Chrome Dev Tools精讲,前端必看!_第14张图片

你可能感兴趣的:(前端,前端,chrome)