chrome devtools使用技巧-一一网

Chrome devtools使用技巧

一、chrome devtools基础使用

查看版本：地址栏输入 chrome://help

彩蛋：地址栏输入 chrome://deno

1.数据操作

1.copy: 在chrome devtools中，可以通过全局的方法copy()复制任何能拿到的资源

2.store as global(存储为全局变量):使用这些变量来操作对应的数据，就不用担心会影响到原来的值了。操作方式：鼠标移至变量然后右键，选择 store object as global variable

console.log({name: "liz", title: "111"})
//右键 save store
复制代码

3.保存报错信息：代码报错了，如何和同事发送报错问题呢？我们可以直接把堆栈追踪信息保存为一个文件，而不只是发个截图给对方。操作方式：在报错的信息旁边，然后右键save as...

2.快捷键通用技巧(mac是command windows是ctrl)

1.切换DevTools窗口的展示布局 ctrl+shift+D

一般我在使用devtools时，窗口习惯在右边，但有的时候，想把窗口调到最下面

2.快速切换DevTools面板向左向右 ctrl+[ ctrl+]

这样可以节省鼠标点击时间

3.find聚焦查找 ctrl+f

elements console source network都是支持的，这也是软件通用的查找快捷键

4.查找js源文件

ctrl+p

5.所有快捷键

setting里可以找到

3.command menu强大功能 ctrl+shift+p

1.dom截屏网页截屏

当你只想对某一个 DOM 节点截图时，大概率会用工具弄半天，但现在不需要了：

全局截图：Capture full size screenshot

对某一个dom节点截图：右键选中dom，capture node，

2.快速更换主题

在 Commands 菜单中寻找与 theme 相关的选项，实现 明亮 & 暗黑 两种主题之间的切换

选择theme =>点击reload devtools

3.查看cpu使用情况

command菜单中查找fps相关的选项

4.代码块的使用

如果我想看看，当前浏览器的版本？如果记性不好的话，是不是每次都要去查找这个脚本内容？

console.log(navigator.userAgent)
复制代码

在chrome运行这段代码，会得到结果。

这样的脚本，只是偶尔用用，不想花费时间去查找，怎么存起来方便以后用呢？

进入到 Sources 面板
在导航栏里选中 Snippets 这栏
点击 New snippet(新建一个代码块)
输入你的代码之后保存

右键run运行

可以更方便的使用，重命名一个名字，ctrl+p 之后输入！就可以选择你的脚本了

二、console详解

1.console中的`$`和`$$`

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。

获取dom: $(‘div’)

获取所有的div列表：$$(‘div’)

获取上次结果的引用:$_

Math.random()
$_
复制代码

在chrome中使用npm包：
现在的前端开发过程，离不开各种 npm 插件，但你可能不知道，在chrome devtools里也可以使用npm包

安装 Console Importer 插件
运行 $i('lodash') 几秒钟后，你就可以在chrome里畅玩 loads 了:

$i('lodash')
_range(10) //生成元素0到10的数组
_.cloneDeep() //深拷贝
_.uniq([1,1,3]) //数组去重
复制代码

这里提一个业务相关的事项：

在进行引用类型做拷贝时，一般简单的都是使用序列化和反序列化去进行拷贝，但是会带来问题，问题在于无法处理函数和正则，因此需要别的方案实现。

2.条件断点

在某个循环中，我只想在第10次循环时进行调试，这个时候如果使用单步调试，要点击十次才能到，有没有办法只有第10次循环触发呢？这就用到了条件断点。

右击行号，选择 Add conditional breakpoint...(添加条件断点)
或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
然后输入一个执行结果为 true 或者 false 的表达式（它的值其实不需要完全为 true 或者 false 尽管那个弹出框的描述是这样说的）。

在这个表达式中，你可以使用任何这段代码可以获取到的值（当前行的作用域）。

条件成立就会暂停代码的执行：

比如在一个for循环中想只在第10次循环去断点调试条件设置为 i===10

3.在断点中添加console.log

与其在你的源码的不同地方去添加 console.log / console.table / console.time 等等，不如你直接使用条件判断来将它们“连接”到 Source 面板中。这样它们就会一直执行，而不当不再需要它们的时候，在 Breakpoints section 点两下鼠标，就可以把所有的断点都移除

这个技术在调试生产环境的问题时同样很有用，因为你通过这样的方式轻松将 console logs 插入到 source 里。

4.比较好用的console

1.console.assert

设想你遇到这样的情况：当某个值判断为假(空字符串，undefined 或者 null)的时候，你期望能在 log 中把它打印出来：

//一般的写法是这样
let v = null
if(!v) {
  console.log("v is null")
}

//其实可以更优雅
let v = null
console.assert(v,"v is null")

//当我们传入的第一个参数为 假 时， console.assert 打印跟在这个参数后面的值。
复制代码

2.增强log的阅读体验

假如有一堆数据要打印在console里面

const name = "liz"
const url = "www.baidu.com"
const id = "fsairmdas"
console.log(name,url,id)
复制代码

光看输出的结果，我们很难判断打印的到底是哪个变量，为了让它变得更加易读，你可以打印一个对象：

console.log({name,url,id})
//原理就是 ES6 中增强的对象字面量 ，所以只要加上 {} 就完事儿了
复制代码

3.console.tab

有的时候一个数组或者是对象有很多内容，console.log去打印非常的难看和费事，这个时候应该使用console.tab

它不仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以缩放甚至 还可以排序

console.tab(localstorage)
复制代码

我们甚至可以和上面的内容结合

console.table({name,url,id})
复制代码

4.console.dir

有时候你想要打印一个 DOM 节点。 console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。如果说你想要查看 这个节点所关联到的真实的js对象 呢？并且想要查看他的属性等等？

在那样的情况下，就可以使用 console.dir :

console.dir($('div'))
复制代码

5.给你的console.log加上css样式

如果你给打印文本加上 %c 那么 console.log 的第二个参数就变成了 CSS 规则，试试看：

console.log('%c hello world', 'background: #222; color: #FFFFFF;font-size:3rem');
复制代码

三. elements的小技巧

元素面板是最常用的UI样式调整面板，这里面常用的操作大家都很了解了，这里讲一下一些技巧

1.通过h来隐藏元素

按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 ‘ h ‘ 可以使它出现。某些的时候这很有用：例如你想截图，但你想去掉里面的敏感信息。

2.拖动&放置元素

当你想看看页面的某一部分在 DOM 树的不同位置的显示效果时，只需要拖动放置它(到指定的位置)，就像在机器上的其他任何地方一样

3. 伪类样式的调试

有的情况下，我们希望某个元素一直保持hover的状态，但是鼠标又要移动上去才能触发：

这个时候我们可以使用elements面板中的:hov去持续这个状态

四、性能调试&其他工具

1.network模拟网络状态

一般我们在做性能测试的时候，通常要考虑到网速很慢的情况，network面板中可以帮助我们调试这个问题。
操作方式：在network面板中，点击no throttling，我们可以选择 slow 3g，甚至可以自定义带宽。

2.performance的工具使用

Performance是性能分析的主要工具，可以帮助我们调试一个软件的性能。在做性能分析的时候，也要考虑到cpu很差的情况，因此，在这个面板中我们可以模拟较差的cpu。
操作方式：在performance面板中，点击最右边的设置图标，然后在cpu的下拉框中进行选择。

3.lighthouse工具的使用

lighthouse是做页面性能分析测试的，它可以帮我们分析出代码中有哪些需要优化的部分，并打出一个分数，然后我们可以根据给出的建议进行优化，比如清除无用的js\css，图片压缩，某些js文件过大等问题，然后我们可以根据这些问题着手解决，然后优化这个分数。

4.手机连到电脑上调试

虽然我们已经能模拟出网速情况、较差cpu的情况，但生产环境我们必须使用手机进行调试，这个时候我们就使用到了chorme开发工具中的inspect调试

在chrome中输入 chrome://inspect，然后手机连到电脑上调试即可。

5.vue devtools

这个是调试vue vuex状态的chrome 扩展插件，建议大家使用，不光是方便调试vue\vuex中的数据，也可以分析各个组件的性能。

6. adb调试工具

ADB是android sdk里的一个工具, 用这个工具可以直接操作管理android模拟器或者真实的android设备。Android的初衷是用adb这样的一个工具来协助开发人员在开发android应用的过程中更快更好的调试apk，因此adb具有安装卸载apk、拷贝推送文件、查看设备硬件信息、查看应用程序占用资源、在设备执行shell命令等功能。

adb常用命令：

adb devices #查看连接设备

adb install test.apk # 安装应用

adb shell pm list packages #列出手机装的所有app 的包名

adb uninstall cn.com.test.mobile #卸载应用，需要指定包

adb logcat #查看日志

adb logcat -c #清除log 缓存

adb push <local> <remote> #从本地复制文件到设备

adb pull <remote> <local> #从设备复制文件到本地
复制代码