湖北招生考试网 高考 | 报名 | 艺考 | 在职硕士 | 留学海外 | 研究生 | 自考 | 计算机 | 健康 | 医学资讯
中考 | 高校 | 成考 | 作文大全 | 会计从业 | 公务员 | 医卫 | 外语类 | 财经 | 职业资格
问吧 | 论文 | 论坛 | 时刻表 | 美食天下
查分 | 娱乐 | 育儿 | 培训网 | 美术高考
高考:高招信息 北京高考 上海高考 广东高考 山东高考 江苏高考 浙江高考 湖北高考 四川高考 天津高考 陕西高考 湖南高考 福建高考 重庆高考 安徽高考 辽宁高考 江西高考 海南高考 宁夏高考 吉林高考 山西高考 广西高考 云南高考 新疆高考 黑龙江高考 青海高考 甘肃高考 西藏高考 河北高考 贵州高考 河南高考 内蒙古高考 港澳台高考 分数线
您所在的位置教育热点网 -> 互联网热点 -> 正文
你不知道的Chrome开发者工具新功能

http://www.15920051600.com     2017-7-12 10:59:19     来源: itwriter     



  相信对本文感兴趣的读者对于 Chrome 开发者工具的基本功能应该都比较熟悉:DOM 查看器、样式面板、JavaScript 控制台。但是 Chrome 开发者工具还有很多不太出名但绝对能够对调试、应用创建带来很大便利的功能。

  一、黑色主题

Chrome 开发者工具

  Chrome 的开发者工具有一个内置的黑色主题。点击开发者工具面板右上角三个点的图标,选择“设置(settings)”,可以看到切换主题的选项(“theme”中选择“dark”启用这一功能)。

  代码写多了,总觉得黑色的主题顺眼很多,是不是看起来也更酷啦。

  二、选择模式

Chrome 开发者工具

  谷歌开发者工具(DevTools)有很多选择方式,但其中最方便的是“选择模式”。

  点击开发者工具面板左上角的鼠标按钮就可以激活这个工具(或者直接 cmd+shift+c)。

  激活后,鼠标在页面上滑动可以看到整个(湖北招生www.15920051600.com考试网)选项页面,选择其中一个元素进行检查。

  如果你想快速查找页面上的某个元素,直接 cmd+shift+c 就可以打开开发者工具中的选择模式。

  三、存储为全局变量

Chrome 开发者工具

  如果记录在控制台的对象有很多 key 或包含手动解析比较困难的值时,检查这些对象有时候会非常棘手。但是 Chrome 通过 JavaScript 让这个问题变得简单很多。

  首先,在控制台中右击某个对象,选择“存储为全局变量(store as global variable)”。把某个对象存储为全局变量,并在被称为 temp1 的控制台中显示,接下来你就能通过 JavaScript 展开工作了。

  四、动画工具

Chrome 开发者工具

  近期,Chrome 团队又增加了一些调试和创建动画的新功能。

  点击左上角“控制台(console)”按钮旁边三个点的下拉菜单,打开“Animations”面板,该功能能够帮你限制该网站上所有动画的播放速度。

  也可以利用它停止页面上的所有动画。如果某个网站上都是动画内容,这个功能就能派上用场咯。{文章来源:湖北招考网hTTp://www.15920051600.com/}

Chrome 开发者工具

  动画查看器使得每个属性的变化情况都在你的掌控之中

Chrome 开发者工具

  点击某个元素中 transition 属性的紫色曲线图标,可以看到这个动画的运动曲线,进而对这个属性进行微调。另外,你还可以使用箭头图标,对预设动画列表进行滚动显示,应用于你的元素中。

  五、伪元素模拟

Chrome 开发者工具

  另一个设计元素样式的简便工具是元素状态模拟器,可以通过点击 Style 面板右上角的:hov 图标来访问。

  该工具能够帮助你模拟与这些选择器相关联的 hover(鼠标经过的状态)、active(按下鼠标时的状态)、focused(元素获得光标焦点时使用的颜色,主要用于文本框输入文字是使用)及 visited(鼠标点击后再次停留在上面的状态)的伪元素并查看样式。

Chrome 开发者工具

  为了增加伪状态的样式,我们可以添加一个新的选择器(通过 + 的图标)并在选择器字符串末尾添加:<state>

  例如,通过 logo 类别为 li 添加 hover 规则,创建一个新的选择器——li.logo:hover 并添加样式。

  然后通过检查:hover 元素状态测试样式,模拟该元素上的悬停。

  六、实现 CSS 和 JavaScript 代码高亮

Chrome 开发者工具

  调试或查看最小化的 JavaScript 和 CSS 非常困难。但是 Chrome 开发者工具同样提供了一个简化这项工作的工具。

  在“Sources”选项卡中打开一个最小化的文件后,您可以单击文件左下角的大括号图标,DevTools 将进行代码高亮。

  尽管某些信息(如变量名称)会在缩小过程中丢失,但这个工具还是能够同时与 CSS 文件及 JavaScript 兼容。

  七、Alt + Up / Alt + Down

Chrome 开发者工具

  调试 CSS 时,你可以选择一个属性并用“上下键”来调整值。默认情况下,箭头(本文来自:湖北招生考试网EDU-Hb.COM)键通过+/- 1 调整值,即调整跨度为1。但是如果按住 alt 键,调整跨度能够缩小到 0.1。调整分数值时,这个方法非常给力。

  相反,如果你按住 shift,调整跨度为 10。

  八、保存日志(Preserve Log)

Chrome 开发者工具

  保存日志是一个能够在日志刷新间隙保留日志的复选框。在调试需要刷新页面的网站问题时,这个功能很管用,因为如果没有这个功能,在这个调试的过程中控制台的所有输出都会被清除。

  启用此选项时,控制台中会显示一种新类型的“Navigation(导航)”日志,从而实现将页面刷新或导航事件显示到不同页面的目的。

  九、Network(网络)+Log Filters(日志过滤器)

Chrome 开发者工具

  调试那些存在很多网络请求和控制台日志的应用程序时,首先过滤出特定类型的事件会省事儿很多。

  Chrome 具有一种支持很多不同属性的过滤语言,以及像 * 这样的操作符进行通配符匹配。

  如果输入“-”,Chrome 会显示一个 typeahead,显示可以过滤的各种属性。你还可以切换“正则表达式”模式,对每行中显示的数据执行正则表达式匹配。

  十、代码覆盖(Code Coverage)

Chrome 开发者工具

  代码覆盖功能可以帮助用(来源:湖北教育信息网hTTp://www.15920051600.com/)户在运行 Web 应用程序时,查看每个 JavaScript 和 CSS 文件中哪些代码已经运行,哪些没有。当用户在处理一个比较复杂的长期项目时,这个工具能够使得死亡代码积累过程更为容易。

  启用该功能前,首先应确保你用的是 Chrome59 或以上版本,然后转到“Coverage”选项卡。按住“record(记录)”开始使用你的应用程序。完成后,Chrome 会向你显示会话期间运行的确切代码。

  十一、程序调试问题

  只有当你在自己的设备上运行应用时,开发者工具才能正常工作。

  如有需要了解和处理用户在创建应用过程中碰到的报错和性能问题,可以试试 LogRocket(本文作者出其不意抛出一个软广,但了解其它厂家的产品也不是件坏事儿)。

Chrome 开发者工具

  LogRocket 是一个前端日志记录工具,能够按照用户需求不断回播报错。程序猿们无需再猜测错误产生原因或者要求用户截屏,只要通过 LogRocket 的重播功能就能确定出问题的地方。LogRocket 几乎与所有应用程序兼容,不受框架限制。而且具备用于记录 React、Angular、Vue.js 中其余情景日志的插件。

  LogRocket 能够为应用程序设备记录控制台日志,例如带有 header 及 body 的网络请求/响应、浏览器元数据、Redux 操作/状态和性能计时。

  感谢阅读到这里。希望这些 DevTool 能大大减轻你的压力,分分钟让广大程序猿们写出更加优秀的应用。

  参考来源: freecodecamp,FB 小编柚子编译,转载请注明来自 FreeBuf(FreeBuf.COM)



[责任编辑:Admin]
大字 中字 小字】【关闭窗口

武汉大学自考专升本
热门搜索
林心如 朴信惠 王源 蒋欣 祝丹文 列车时刻表 周迅 湖北招生信息网 叶子媚 方便面雪糕 作文大全 韩懿莹 武汉培训网 医学资讯 李咏 黄岩岛 江苏卫视 我的朋友陈白露小姐 吕一 天气预报 汽车时刻 PM2.5查询 区号查询 公交查询 剧情介绍
美术高考
·美考资讯
·志愿填报
·美术联考
·院校介绍
·招生简章
·招生计划
·考点时间
·成绩查询
·美考试题
·素描教学
·美术图库
·优秀试卷
文字广告
湖北高考查分 湖北自考成绩查询 湖北自考电子档案查询 湖北自考考场查询 河南高考查分 娱乐新闻 湖北高考网 社会新闻 湖北大学自考 武汉大学自考 明星资料 美术高考网
湖北高考成绩查询 励志名言 湖北卫视 善方秘膏 高考分数线 艺考分数线 互联网新闻 艺考动态 事业单位 工作总结 个人总结 报告陈述 演讲稿 入党资料 节日作文 列车时刻

网站介绍 | 诚聘英才 | 版权声明 | 广告招商 | 联系我们 | 友情链接 | 湖北自考成绩查询 | 网站导航 | 加入收藏 | 旗下:汽车网 养生网
Copyright © 2008-2011 湖北招生考试信息网 湖北招生考试网 All Rights Reserved 湖北省阳光高考信息平台
站务:400-6191-027 邮箱:175914623@qq.com(娱乐类除外)

鄂公网安备 42018502000108号  ICP备案号:鄂ICP备11002883号-1


高考查分分流站 湖北唯一PR8的教育门户
全站地图 2 3 4 5 6 7 8 9 10 art1 art2
365bet在线开户