Chrome 59中 DevTools 的新功能,可查找未使用的JS/CSS代码

2017-07-14 11:23:10  来源:搜狐  编辑:

        【每日科技网】
  Note: 可以通过 chrome://help 查看当前的 chrome 版本。
  划重点
  CSS 和 JS 代码覆盖率. 通过新的 Coverage 标签列出未使用的 CSS 和 JS。
  全屏截图. 获取整个页面的截图,从页面视图的顶部到底部。
  阻止请求. 手动禁用网络面板中的单个请求。
  跨越异步等待. 可预测地跨越异步请求。
  统一命令菜单. 执行命令并从新统一的命令菜单打开文件。
  新功能介绍
  CSS 和 JS 代码覆盖率
  在新的 Coverage 标签下列出未使用的 CSS 和 JS 代码。当你运行一个页面时,这个标签展示了你的代码覆盖率,以及加载了多少。你可以通过仅仅保留有用的代码来优化页面的大小。
  图 1. Coverage 标签
  点击一个 url 将会在 Sources 标签下以断点的方式展示哪些代码被执行了。
  图2. Sources 标签下的代码覆盖率展示
  每一行代码都被以颜色区分:
  绿色表示代码被执行;
  红色表示没有被执行;
  既有红色又有绿色,比如图2中的第3行,表示该行的一部分代码被执行。例如一个三元表达式如:var(= 0)?A:0 是红色和绿色。
  Note: 这里的颜色在未来的 chrome 版本中可能会有变化。
  打开Coverage标签:
  打开 Command Menu.
  开始输入 Coverage然后选择 Show Coverage。
  全屏截图
  通过下面的视频来学习如何使用截取一整个页面的功能。
  阻止请求
  想要看看在特定的 、stylesheet或其他资源无法找到时页面如何表现吗?在Network标签中右击这个请求,选择Block Request URL,将会显示一个新的Request blocking标签,用以管理被卡住的请求。
  图3. Block Request URL
  跨越异步等待
  到目前为止,尝试像下面的代码片段一样执行代码是很令人头痛的。你会在 test() 的中间,跳过一行,然后你会被 setInterval() 中断。 现在,当你逐步执行异步代码如 test(),DevTools 从第一行到最后一行步进。
  function wait(ms) {
  return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }
  // do some work in background.
  setInterval(() => 42, 200);
  async function test() {
  debugger;
  const hello = "world";
  const response = await fetch('index.html');
  const tmp = await wait(1000);
  console.log(tmp);
  return hello;
  }
  async function runTest() {
  let result = await test();
  console.log(result);
  }
  变化
  统一命令菜单

  现在打开 Command Menu,你将注意到前面有一个大于号。这是因为命令菜单已经通过打开文件菜单进行统一 Command + O(Mac)或 Control + O(Windows,Linux)。 

免责声明:本文仅代表作者个人观点,与每日科技网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。

本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们联系,本网站将在规定时间内给予删除等相关处理.

图片中心