chrome浏览器调试工具你会使用吗?

浏览器调试工具使用总结

一. console使用

  • console.table(),可以把对象输出成表格的形式,直观的观察数据。
  • console.dir(),可以直观观察dom元素的对象形式

二. $的使用

  • $('selector'),获取查询到的第一个dom元素
  • $$('selector'),查找符合selector的所有元素,相当于document.querySelectorAll()
  • $_,获取控制台上一次输出结果
  • $0,获取选中的dom元素
  • $i,是一个console impoter插件,使用这个插件可以在控制台中可以加载想要的模块,进行快速调试。$i('moduleName')这样使用

三. copy()

  • 使用copy方法,可以复制变量到剪贴板,且为格式化的结构
  • store as global variable,把一个变量变为一个临时的全局变量。可以在控制台拿到他。

四. 异步

  • 在控制台中还可以使用异步,使用await

五. command菜单

  • 可以使用command+shift+p呼出来
  • 几个有用命令(1)screen可以截屏,有节点截屏,和全屏截屏。(2)layout,可以调整devtools布局方向。(3)theme,可以切换主题色。其他功能,可以自己把玩。

六. 断点

  • 对dom元素下断点,选中dom元素直接右击,在break on中有三种类型的断点,1.元素被移除,2.子元素被修改,3.属性被修改

七. 强制触发元素状态

  • hover,visited,active,focus等状态可以强制触发。
  • 位置在styles的:hov中

原文:https://juejin.im/post/5c09a80151882521c81168a2 这个要更详细直观一些,希望多多学习一些东西。

上一篇:Listview滑动时不加载数据,停下来时加载数据,让App更优


下一篇:在CMD下启动vmware、Xshell连接虚拟机以及控制Chrome浏览器自动执行js登录校园网