有人在代码里下毒，啊……
0%

发表于 更新于 Valine：

Performance 面板就是以前的timeline面板。用于可视化分析代码性能。js提供了对应的API用于分析
https://developer.mozilla.org/zh-CN/docs/Web/API/User_Timing_API

user-timing-performance.gif
您可以使用User Timing API查找缓慢的JavaScript代码。

尝试包装可能缓慢的代码，如下所示：

1
2
3
4
5
6
7
8
9
10
11
performance.mark('costlyFunction Start') // 起始标记

costlyFunction()

performance.mark('costlyFunction End') // 终止标记

performance.measure(
    'costlyFunction', // 性能测量名称,会在时间线显示
    'costlyFunction Start',  起始标记
    'costlyFunction End' 终止标记
)

使用性能API有以下好处

  • 将性能指标注入您不熟悉的应用程序中(上图的例子)
  • 以编程方式读取JavaScript中记录的所有性能指标。performance.getEntries() performance.getEntriesByType(entryType)
    performance.getEntriesByName(name, entryType)
  • performance将性能捕获代码部署到最终用户，以便您可以收集实际用户指标。
  • 了解真实用户监视的好处，以及它与综合监视的比较。
  • 使用Boomerang和Node.js之类的工具组合，从您的真实用户直接接收服务器的性能指标。
  • Dev在DevTools中可视化用户计时指标，并将其与现有的火焰图相关联。
  • 使用外部服务和插件可视化您的性能指标。

补充

我们做性能录制的时候,系统获取资源,事件触发的时候,内部就是调用的这个API。Chrome选择暴露给我们，让我们在录制的时候，可以更快的找到我们想分析的部分，有针对性的分析我们想分析的代码段。我们还能做监控，当代码执行达不到我们预期的效率的时候，触发上报机制，上报到监控系统。

发表于 更新于 Valine：

这个真心不错,以前都是装插件使用滚动截图的功能弄得

  1. F12 打开
  2. ctrl shift p打开 goto anywhere 命令栏
  3. 输入 full找到对应的命令回车
    image.png

补充

如果觉得每次找这个命令麻烦,可以把该功能设置成快捷键
除了全页截图,还有
Capture node screenshot - 截取正在检查的节点
Capture screenshot - 只截取可视区域的页面
Capture full size screenshot - 整个页面的截图,即使没有呈现在可视区域内的
Capture area screenshot - 跟QQ截图一样,自己划定区域

思考

这个截图功能在做自动化测试时候非常有用,不知道 webDriver是不是用这种内置API去实现的,还是说用的c++调用操作系统能力去实现的?有知道的老铁留言讨论下

发表于 更新于 Valine：

go-to-column.gif

  1. Ctrl + O 或者是 Ctrl + P 可以用于查找文件，这个跟vscode是一致的
  2. 打开查找工具栏 @开头查找函数 ：开头跳转行好 > 开头查找命令

editing-locations.gif

  1. ALT+ ← ALT+ → 可以跳转光标的历史位置，vscode中也是一样的，方便查看定义，再回到原来的位置
  2. ctrl shift o 查找文件中的方法定义,不在source面板中使用会跳转到书签管理器界面。这个vscode快捷键是一样的。
    go-to-member.gif

补充

资源面板里面编辑文件是有智能提示和代码检测的呢

发表于 更新于 Valine：

帧率是视频设备可以产生图像（或帧）的速率。 电影和游戏最熟悉它，但现在已广泛用作网站和 Web 应用程序的性能指标。

60 fps 的帧率被认为是实现流畅显示的目标，因此，为响应某些事件而需要同步进行的所有更新，需要在 16.7 ms (1000ms/60次=16.7ms )内完成。

但是，一致性尤为重要：如果您无法提供 60 fps，则最好以更低的速率连续提供更好的帧率，并避免帧速率突然下降而导致站点假死。

render-perf-pane.gif

补充

新版的这个功能貌似被移除了,我以前还用过 render 面板去看元素重绘还是很方便的,有颜色做区分
如果真要看FPS,建议还是在录制一下,参考下图去查看比较方便
image.png

发表于 更新于 Valine：

正常使用简书的图片会出现403错误,需要在页面头_includes\head.html加入 <meta name="referrer" content="no-referrer"/>防止被简书安全措施(跨站请求伪造)拦截

发表于 更新于 分类于 Valine：

port-forward.gif

在本技巧中，您将学习如何在Android设备上转发端口。

端口转发使您可以直接在android设备上查看本地网站，即使该网站托管在自定义域中。

  • Chrome浏览器从台式机拨打我的本地主机URL
  • 远程调试移动本地主机页面并启用端口转发
  • 刷新并观察到不需要命令行！

补充

  1. Chrome远程调试界面的的urlchrome://inspect/#devices

  2. 记得在手机开发者工具上打开启用USB调试

  3. 配置入口如下图
    port-forward配置入口

  4. 配置完勾选端口转发复选框
    image.png