Chrome DevTools
Chrome DevTools 小技巧 1.表格视图 console.table(arr2/obj, [arrColName]); // 以列表形式显示对象属性/值或者多维数组键/值 2.计时 console.time/timeEnd(str); // 成对出现,配合使用 3.snippet 可以把自己的调试工具库放进去,非常方便 4.图片取色 用浏览器打开图片,审查元素,设置任意色值,用取色器取色 5.常用快捷键 Ctrl + Shift + f 跨文件查找 Ctrl + Shift + o 查找函数定义 Ctrl + p 转到Sources面板 Ctrl + Shift + c 审查元素 Ctrl + L 跳转到指定行 ESC 显示/不显示console Ctrl + L 清空console 零.主面板 1.常用功能 模拟设备(横屏切换),模拟触摸事件(默认开启) 2.不常用功能 模拟网络(移动网络性能优化),模拟经纬度、加速度,调试媒体查询 二.Elements 1.常用功能 定位,临时修改,查看css规则,事件监听 2.不常用功能 DOM断点 (插入断点,子树更新/属性值更新/节点移除时触发,对应DOM3级节点更新事件),拖放节点修改DOM结构, 强制元素显示hover/active等状态 三.Network 1.网络面板能做什么 哪个资源最晚开始下载?