time1812的专栏

时间过得真快，Chrome 的版本已经升级到90了。这次的开发者工具更新中增加了flexbox调试工具，试了一下，挺有意思的。首先在Elemets 视图下，如果一个元素的display: flex的话，元素后面会显示一个 “flex” 的按钮，点一下网页上相应的位置就会出现一个虚线框表示出这个flexbox的位置。如图然后在边栏上styles标签下对应的flex定义处会出现一个按钮点开有惊喜…...

初识CypressCypress （https://www.cypress.io/）是一款功能强大的端到端的Web 测试框架。相比于其他类似最大的特点就是有个可视化的UI界面，调试起来相当直观方便。使用的时候要按业务需要写一些测试用例就可以用带界面或者纯命令行模式来跑了。安装Cypress依赖于node js 环境，估计做web 开发的人都是有的。Cypress本身可以用npm安装在目标项目下：npm install cypress --save-dev或者用yarn 也行yar

原文地址： https://developers.google.com/web/updates/2019/09/devtools审计(Audit)面板支持多客户现在可以在审计面板中组合其他开发工具特性了，比如Request Blocking 和 local overrides。调试支付事件应用（Application)面板中的后台服务（Background Services）部分开始支持支...

原文： https://docs.cypress.io/guides/references/best-practices.html组织测试，登录，控制状态错误：共用页面对象，使用你的UI登录，不截屏最佳实践：测试spec之间相互独立，用编程的方式登录，控制你的应用的状态选择元素错误：使用脆弱的选择器，无法适应改动最佳实践：使用“data-”属性来为你的选择器提供支持，避免CSS或JS改...

拷贝元素样式在DOM树上右键点击某节点来拷贝CSS到剪贴板。布局变动可视化注意：此功能可能使你的屏幕频繁闪动有时候当你在喜欢的网站上读新闻的时候，你会因为图片和广告等内容的加载完毕使得内容不断变动而失去当前阅读的位置。这种情况称为布局变动（Layout shifts）。这是因为网页开始没有为图片，广告等内容预留地方。解决方案就是使用"占位符"开发者工具现在可以帮助你检测到布局变动:打...

当自动补全CSS的时候使用有意义的预设值有些CSS属性的值是函数，比如filter： filter: blur(1px) 添加了1像素的模糊。当自动补全filter这样的属性是，开发者工具现在会自动填充一个有意义的值，这样你可以预览有什么可能的值。使用命令菜单来清理网站数据按下"Control+Shift+P"或者"Command+Shift+P"（Mac）打开命令菜单，然后可以运行”Cle...

CSS根据值自动补全当我们给一个DOM 节点添加样式声明的时候，有时候属性的值比名字更好记。比如说当我们想让元素加粗， "bold"值也许比属性名"font-weight"更好记。现在样式窗格的自动补全功能支持根据CSS值来补全。如果你只能想起来某些值的关键字但想不起来属性名了，试试输入值，自动补全功能将帮助你找到。网络设置的新界面过去的网络面板有个问题：当调试窗口太窄时有些开关就看不到了。...

原文链接： https://developers.google.com/web/updates/2019/03/devtools高亮显示所有被CSS属性影响的节点鼠标滑过一个CSS属性（比如padding 或margin）的时候，高亮显示本条设置影响到的节点审查(Audits)面板中的Lighthouse v4…WebSocket二进制消息查看器要查看二进制的WebSocket消息的内...

英文原文地址：https://developers.google.com/web/updates/2019/01/devtools日志点（logpoint）使用日志点功能可以避免你在代码中调用cosole.log()来调试代码。添加日志点的步骤：右键点击你想要加日志的行号选择“添加日志点”（Add logpoint…）将弹出断点编辑器在断点编辑器中输入你想记录的表达式按回车或在断点...

性能指标的可视化在记录页面加载信息之后，开发者工具在“Timings”中显示诸如“DOM content loaded”或“First MeaningfulPaint”等指标。高亮文本节点当鼠标悬停育一个DOM树种的文本节点上面时，开发者工具将为你高亮显示文本。拷贝JS路径假如你在写自动测试，其中包括点击某个节点的操作，所以你想快速得到那个DOM节点的引用。普通的方式是去元素面板右键点击...

鼠标指向Live表达式将高亮标出DOM节点当Live 表达式的结果指向一个DOM节点时，鼠标指向（hover）此表达式将自动高亮DOM节点。将DOM节点存为全局变量要想将DOM节点存为全局变量，可以在控制台运行一个结果为此节点的表达式，右键点击结果，弹出菜单里选择“存为全局变量” （store as global variable）。或者右键点击DOM数中的节点并在弹出菜单里选择“存为全局变...

原文请参见： https://developers.google.com/web/updates/2018/08/devtools控制台动态表达式在控制台上方可以放一个动态表达式，用于实时监控它的值 1. 点击 “Create Live Expression”按钮（图标是一个眼睛），打开动态表达式界面 2. 输入你想要监控的表达式 3. 点击其他地方即可保存在Eager Ev...

Eager Evaluation: 当你在控制台写表达式的时候，控制台将显示预览结果。（需要在控制台设置中打开这个功能）Argument hints: 当你在控制台写函数调用时，控制台将显示那个函数的参数列表。（带问号的表示可选参数）Function autocompletion: 当你在控制台写函数调用时，控制台将自动显示函数返回值对象可用的属性及函数。（此项功能依赖于Eager Eval...

可以在Network面板中搜索关键字了，用法是标准的Ctrl/Command + FNetwork request支持Copy as fetchAudit panel 增强，可以选择desktop而不模拟mobile了，也可以选择不限制CPU和网速No throttling。Audit 之后可以查看性能记录了，点击View Trace按钮即可跳到Performance面板查看记录Dark...

参考： https://developers.google.com/web/updates/2018/01/devtools Chrome更新很勤快，65又出了几天了。本地覆盖过去如果我们的服务器在本地（本机，localhost）的话，chrome可以支持在devtools里面映射到本地文件夹然后直接修改代码，就像是个IDE。但是如果是远程服务器就不行了。现在有了这个本地覆盖的功能，...

参考： https://developers.google.com/web/updates/2017/11/devtools-release-notes#overrides性能监视器过去我们可以使用performance工具来分析网页性能，但不能实时监控。 现在有实时的性能监视器啦，在这个面板里面你可以看到网页的：CPU 使用率JavaScript 堆大小DOM 节点，Jav

1. 介绍工欲善其事，必先利其器。对于前端开发，Chrome Developer Tools 就是前端调试的一大利器。在这里记录一些我在使用中的的经验技巧。废话少说，下面我们开始…2. 正文2.1 让网页和开发者工具的背景变暗对于程序猿这个职业，每天都要长时间盯着电脑屏幕。天长日久，眼睛的疲劳在所难免，尤其是默认的白色背景，尤其显得刺眼。因此很多人把电脑默认颜色调成苹果绿，编辑器的颜色调成黑色背景以