谷歌浏览器检查动画css?谷歌浏览器的检查功能
各位老铁们,大家好,今天由我来为大家分享谷歌浏览器检查动画css,以及谷歌浏览器的检查功能的相关问题知识,希望对大家有所帮助。如果可以帮助到大家,还望关注收藏下本站,您的支持是我们最大的动力,谢谢大家了哈,下面我们开始吧!
本文目录
一、打开chrome浏览器开发者工具的方式
1、Chrome提供的一些调试功能,在排查代码故障时非常有帮助。事实上,由于谷歌浏览器提供的调试工具太多,很多都被隐藏了起来,等待你去探索。
2、声明:本文已获作者Ferenc Almasi翻译授权。
3、Chrome DevTools(开发者工具)团队每月(
4、 )都会在他们的网站上发布更新,你也可以在他们的官方 Twitter账户(
5、 )上找到一些很棒的提示。如果你想了解更多关于 Chrome提供的工具的信息,我强烈推荐查看这两个信息来源。
6、在这篇文章中,我收集了 10个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程,可以在更短的时间内完成更多的工作。
7、这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题,你会尝试登录控制台,但所有内容都被清除了。解决方法很简单,但我很久以前就不知道了:
8、通常,当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是,我们可以通过访问 Sources选项卡,用 Ctrl P打开一个 js文件,并检查其中的相关事件:
9、对于 DOM操作也可以添加断点。通常可以断点在某节点接收到属性更改上,例如添加了某个 class。在一个大型代码仓库中搜索相关代码将耗费大量时间,其实你可以简单地为元素添加一个断点,然后剩下的交给 DevTools处理。
10、有时候我们对代码进行性能优化,会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下,你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互,只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl Shift P打开工具面板,然后点击重新加载图标开始记录,所有以红色显示的内容都不会被执行。
11、不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时,每次更新都会导致整个页面重新绘制。你可以通过在 Render选项卡中启用 paint flashing来解决这些问题,并查看哪些元素触发了这些问题。
12、同样,Ctrl Shift P会弹出工具栏。
13、在 Rendering选项卡上启用重新绘制
14、既然上面讨论了渲染,那么让我们来看看如何调试 CSS动画。用 Ctrl Shift P打开工具菜单,输入“ animation”它将为你打开动画标签,这将记录任何发生在网站上的动画。你可以重播它们,看看它们的宽松程度,然后根据时间或持续时间调整:
15、我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤,这个任务可能会消耗时间:
16、这可以在 DevTools内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像:
17、假设你正在调试一个问题,并且你的代码中有两个断点。你正在进行堆栈跟踪,你会发现堆栈信息中大多数来自核心框架文件,如 React或 jQuery。为了避免在调试器中包含这些核心文件,你可以对它们进行黑盒处理,这意味着 DevTools将跳过这些文件,以便你可以专注于自己的代码。
18、本地覆盖是我最喜欢的一个,我发现自己使用它越来越频繁。它是一个强大的工具,使你能够加载生产文件的本地副本,并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时,这一点尤其有用。
19、你可以在“Source”选项卡下启用 Overrides(重写)。如果你没有看到 Overrides链接,点击 Page右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。
20、我发现自己一直在使用 Lighthouse面板,这是为了审计你的网站在各种指标:性能,PWA,可访问性,或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接,它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits”选项卡下进入“灯塔”,如果你没有看到标签,只需点击锯齿符号来显示隐藏的标签。
21、生成报告后,可以将结果保存为 JSON文件,稍后导入以进行比较。
22、上面是必须知道的 10个 Chrome开发工具特性,它们帮助我简化了工作流程,并且在更短的时间内完成了更多的工作。
23、你每天使用的 Chrome开发者工具的功能是什么?请在评论中告诉我们。
24、
25、作者简介:Ferenc Almasi,匈牙利前端开发者,热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术,创造简单而有吸引力的东西。
26、译者:明明如月,知名互联网公司 Java高级开发工程师,CSDN博客专家。
二、怎样使用浏览器查看网页HTML和CSS源代码
1、IE9浏览器默认情况下隐藏了浏览器菜单栏,因此在打开IE9浏览器以后,需要按键盘上的ALT键来显示浏览器工具栏。
2、在显示出来的IE菜单栏上点击菜单“查看”→“源文件”。
3、IE浏览器会自动打开一个新的窗口来显示网页源代码。
4、哦~这份缘文件实在太难看懂了~别着急,其实IE9提供了一个更为强大的网页源代码查看工具——开发者工具。
5、点击IE9浏览器右上角的齿轮图标,在下拉菜单中点击“F12开发者工具”,或者直接按键盘上的快捷键F12也可以打开开发者工具。
6、IE9的开发者工具提供更为强大的网页开发查看代码和调试功能,你可以使用开发者工具更方便地查看网页HTML代码,CSS样式代码和脚本等信息。
7、使用Firefox火狐浏览器查看网页源代码
8、Windows Vista/7用户:点击Firefox浏览器左上角的快捷菜单,在下拉菜单中点击“Web开发者”→“查看页面源代码”。
9、Windows XP/Linux用户:点击Firefox浏览器的菜单“工具”→“Web开发者”→“查看页面源代码”。
10、Firfox浏览器会打开网页源代码窗口显示网页HTML源代码。
11、如果想要查看其中外联的CSS源文件,可以用鼠标点击源代码中的CSS外联文件链接网址。
12、不过自带的之中网页源文件查看器并不好用,你可以尝试使用插件Firebug来获取更好用的网页开发功能。
13、点击“Web开发者”→“获取更多工具”。
14、在弹出的Firefox新标签页中安装插件“Firebug”。
15、安装完成以后会在Firefox浏览器的右上角工具栏中添加Firebug的图标,点击它就可以使用Firebug网页调试工具了。
16、使用谷歌Chrome浏览器查看网页源代码
17、点击Chrome浏览器右上角的快捷菜单“工具”→“查看源代码”。
18、Chrome浏览器会打开一个网页源代码显示窗口,这个源代码显示窗口好像也是不那么友好,一大堆网页代码实在不知道如何下手呀。
19、如果你想要更好的网页源代码显示和开发工具,那就点击Chrome浏览器右上角的快捷菜单“工具”→“开发者工具”。
20、看看,不需要下载任何插件,Chrome浏览器就已经为你提供了一个相当强大的网页开发者工具了。
21、使用Chrome浏览器开发者工具来查看和调试CSS也相当好用。
三、谷歌浏览器不支持CSS设置小于12px的文字怎么办
在最新版的谷歌里。已经不在支持这个属性啦
谷歌浏览器Chrome是Webkit的内核,有一个-webkit-text-size-adjust的私有 CSS属性,通过它即
可实现字体大小不随终端设备或浏览器影响。
-webkit-text-size-adjust:none;
如何让谷歌浏览器支持小于12px的字体
经常与网页打交道的攻城师,应该都知道。谷歌不支持小于12px的字体。
比如。修改浏览器配置。修改浏览器语言。
但作为一个WEB,我们无法修改用户的浏览器。这时候就出现了
html{-webkit-text-size-adjust:none;}
但是,在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。
而我们用到的就是transform:scale()
<p>我是一个小于12PX的字体</p>
放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px
-webkit-transform:scale(0.8);//0.8位缩放倍数,具体自己根据实际需求修改
p{font-size:10px;-webkit-transform:scale(0.8);}
但是,如果,这个属性会把真个p的属性都缩放。如果我有背景呢?我有边框呢?都会被缩小!
<p><span>我是一个小于12PX的字体</span></p>
span{-webkit-transform:scale(0.8);}
但是你会惊讶发现,不可以。实际上,是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高
的元素,而span是行内元素,不可以
span{-webkit-transform:scale(0.8); display:inline-block}
为什么定义 display:inline-block而不是 display:block?
转为block就独占一行啦。如果我后面紧追怎么办元素。所以转换为inline-block
放在谷歌浏览器里,运行一下会发现支持字体变小啦~~放心啦。。。
但是你会发现。会存在一定的边距。貌似margin或者padding的间距。这就是缩放存在问题。原来的位
所以,要对应修改margin了。定义为负的。。
NO,我们还需要去兼容opera!!!
为什么?opera现在最新版也是webkit内核啦~~~苦逼的工程师呀~
本来就是10px的字体了。然后在缩放,不敢想象了!
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
放心opera还是支持他的私有前缀的。
<title>无标题文档</title>
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
<p><span>我是一个小于12PX的字体</span></p>
为了方便,我们最好定义为一个类,方便我们每次调用
<title>无标题文档</title>
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
<p><span class="shrink">我是一个小于12PX的字体</span></p>
关于本次谷歌浏览器检查动画css和谷歌浏览器的检查功能的问题分享到这里就结束了,如果解决了您的问题,我们非常高兴。
声明:信息资讯网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,版权归原作者东方体育日报所有。若您的权利被侵害,请联系 删除。
本文链接:http://www.gdxhedu.com/news/199211.html