文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

chrome插件开发教程

越来越多的前端开发人员喜欢在Chrome里开发调试代码，Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。...JavaScript Errors Notifier 安装该扩展后，会在Chrome地址栏中以图标形式提示JavaScript错误，因为Chrome默认只有打开console才会显示错误。...Window Resizer 此扩展可以调整浏览器窗口的大小，以适应各种屏幕分辨率。这对于Web设计师和开发者非常有用，可以帮助他们在不同的屏幕分辨率下测试网站布局。...用法是在新窗口里输入js文件的URL或者在查看HMTL源代码时点击js文件的链接。...IE Tab 在Chrome中打开IE浏览器标签页，你可以打开一个标签来运行Internet Explorer，让你看到的网页在IE浏览器看起来如何。

1.7K30
您找到你想要的搜索结果了吗？
是的
没有找到

2021 年值得推荐的 14 款 Chrome 开发者插件

采用鼠标悬浮特性，点击后就可以告诉你所指字体的属性，字体名称、字体大小、字体颜色等，非常方便，目前有 Chrome 和 Safari 扩展，Firefox 的用户可以使用书签栏工具。...，在某个时间点，你会想知道网页上显示的颜色代码。.../ Window Resizer 是一款可以调整浏览器窗口大小的 Chrome 窗口缩放插件，特别适合 Web 前端开发，用户安装了 Window Resizer后，可以使用插件提供的选项来选择浏览器窗口大小...插件还有一个实时窗口测量器，因此当你手动调整屏幕尺寸时，你就知道正在使用的尺寸。此外，还有一个旋转功能，因此你可以查看侧视图的外观并涵盖所有角度和变化。...它提供了一个浮动面板，该面板显示鼠标悬浮在的元素的标识，以及它的字体、文本、颜色、背景、框、定位和效果属性。CSSViewer 可以提供你所需要的基本的CSS信息。

2.9K30

浏览器之性能指标-CLS

---- 图片的宽高比(Aspect Ratio) 在渲染时的作用 图片的宽高比在渲染时起到重要作用，它影响了图片在页面中的布局和显示效果。...❞ 与FOIT类似，当使用Web字体时，浏览器可能会先显示系统默认字体，然后在字体文件加载完成后，突然将文本样式化为所需的Web字体。这种体验被称为FOUT。...在停止录制后，Chrome开发者工具会返回一个时间轴，显示加载时间、各个请求和核心网络指标。从这个时间轴中，我们可以选择Layout Shifts下列出的各个布局位移事件。...使用font-display: swap;：这将在字体加载完成之前显示备用字体，然后在字体加载完成后再切换为所需的字体。...由于这种新的方法，开发人员开始使用CSS来调整图像的大小。 使用这种方法，只有在浏览器开始下载图像后才会分配空间。在所有图像都显示后，布局会发生变化，导致不必要的偏移。

72620

Android N上一些新特性的介绍「建议收藏」

据官方表示开启Doze后，手机的续航可以延长数小时。实际测试中虽然没有Google官方说的那般优秀，但依旧对续航起到了一定的改善作用。...系统级电话黑名单功能 在Android N中，谷歌将电话拦截功能变成了一个系统级功能。其它应用可以调用这个拦截名单，但只有个别应用可以写入，包括拨号应用、默认的短信应用等。...紧急信息窗口仅在当你设置了安全锁屏且在紧急拨号面板下才会显示出来，毕竟当遇到突发急症等险境时，如果在手机上设置了锁屏，别人就无法主动通过手机联系家人或朋友。...可调节显示尺寸 Android N将带来一系列新的辅助功能，现在你不只可以调整字体大小，还可以调整显示的尺寸。...此前的调整字体大小弱爆了，新的可调节显示设置，可以改变整个用户界面的比例，实时改变包括诸如按钮，图标和搜索栏的大小。 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

1.3K20

超酷炫！5 款图像工具瞬间提高代码逼格！

从 Chrome 商店将 Marmoset 添加到 Chrome，之后启动 Marmoset 窗口，左侧窗口 Marmoset 默认提供了一段代码，右侧窗口展示对这段代码的透视效果，拖动右侧窗口可以调整透视角度...，效果实时显示，窗口底部提供不同编译器主题、代码显示模式、透视代码效果等大量内置参数。...PNG 和 SVG 项目格式、调整字体大小、保存用户定义的设置等。...「Editor」参数调整窗口主题、代码语言、字体大小及行号显示。 ?...将你的代码复制粘贴到 CodeZen，从 CodeZen 预设的语言、字体大小、窗口主题、背景颜色、窗口宽度等参数来调整代码图像效果，保存图像支持 JPG 和 PNG 格式。

1.3K10

「译」前端项目中常见的 CSS 问题

下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...在 macOS 下的 Chrome 中，这看起来不错，但是在 Windows 下的 Chrome 中，滚动条始终存在（即使内容很短）。这是因为 scroll-y 会无视内容，一直显示滚动条。...而 overflow: auto 只在需要的时候才会显示滚动条。 image.png 左边：macOS 下的 Chrome。...压缩或拉伸图片 用 CSS 调整一张图片的大小时，如果纵横比与图片的宽高不一致，则图片会被压缩或拉伸。 解决方法很简单：使用 CSS 的 object-fit。...一些图片必须在不裁剪或者不调整大小的情况下显示，并且某些平台会强制用户以特定的尺寸裁剪或上传图片。例如，Dribbble 规定上传的缩略图尺寸为 800 x 600 像素。 18.

2.1K10

CSS使用字体新姿势 unicode-range用法与使用场景

不过一般在使用英文字体的时候，都没有什么问题，但是在使用包含有汉字的字体的时候，字体文件一般都比较大，5～6MB的一般都算小的，大的10几MB，这对网站的加载速度是一个很大的影响。...这里使用一下张鑫旭老师整理的一些显示方式: HTML中字符输出使用&#x配上charCode值。 在JavaScript文件中为防止乱码转义，则是\u配上charCode值。...在知道unicode-range的作用以后，回到刚刚加载字体的问题上，如果你给字体设置了一个区间，只有当页面有字符匹配到了这个区间，就会去加载这个字体文件，这样就会极大到减少资源请求。...我在iconfont上选了两个样式差距有点大的字体。 其中站酷高端黑只添加a,b,c,鹿这四个字符并设置unicode-range为U+61-64, U+9e7f(a-b, 鹿)。...，比如英文拆分为一个字体文件块，标点符号啥的拆分为一个块，然后只有当网页有命中条件以后才会加载相应的字体块，一些特殊的字符啥的拆分为一个块，这时比如一些特殊字符一般网页很少用的，既可保证特殊字符的正常加载

2.3K10

Cloudflare的HTTP2优化策略

HTML文档分为两部分：文档的开头部分包含显示内容所需的浏览器样式表、脚本和其他说明；文档位于头部文件之后，包含浏览器窗口中显示的实际页面内容（脚本和样式表也被包含在其中）。...其中尤为重要的一项的是字体，浏览器仅在将样式表应用于即将显示的网页内容之后才会确认所加载字体。因而当浏览器确认所加载字体前，现存的即将被显示在网页上的文本就应当被准备完毕。...获取字体过程所发生的任何延迟最终都会导致屏幕上显示空白文本或以错误字体显示文本。...在实际测试中，Chrome的加载效果几乎与采用“最佳加载策略”的浏览器相同，唯一的区别是Chrome的图像采用按顺序加载的方式一次性加载完毕而非并行加载： 前5秒，Chrome体验与采用“最佳加载策略”...在给定的优先级内，有3个不同的“并发”组： 0：并发“0”组中的所有资源按照请求的顺序使用100％的带宽依次发送。只有所有并发“0”组的资源被下载完成之后，浏览器才会考虑同一级别的其他组。

1.3K30

29个前端工程师和设计师必备的Chrome插件

今天，我来分享下自己收集的一系列Chrome插件，希望能够提高大家的工作效率。以下插件均可在Chrome 网上商店中找到。 Devtools Terminal—嵌在浏览器中的终端。开发调试利器！...Window Resizer —调整浏览器窗口大小，模拟各种分辨率。帮助Web设计师和开发者测试多种分辨率下的布局效果。 WhatFont — 识别网页所使用的字体。...CSS Shapes Editor — 在所选中元素上方显示交互式编辑器，用于新建和调整用CSS写的图形。...jQuery Audit — 在元素面板创建侧边栏，显示jQuery委托代理事件、内部数据、当前选中的DOM节点、函数和对象等信息。...HTML5 Outliner — 使用网页中的标题和分区信息，创建可点击的大纲视图。 PerfectPixel — 在页面上显示半透明的图像，便于逐像素对比调整前后的页面效果，以达到最佳水准。

1.9K20

制作H5响应式页面注意事项、微信二次分享

1.3.2     切图时，许多东西可以是图片，比如特殊字体、小部分特殊规则说明，用图片的形式避免特殊字体无法显示的窘境。          ...1.3.3     （APP时，PC端无此规则）为防失真，设计给的图片通常都是750px（是Iphone6的屏幕尺寸两倍大《375px》），所以如果用两倍大的图片量尺寸且在iPhone6下做测试，在页面布局的时候要除以...=1像素，如果设置div宽度为100px，假设屏幕分辨率为1024*760，则表示1024分辨率（1024px）中有100px被div占据（分辨率以像素px作为基本单位），这和屏幕大小没有关系，也不随显示窗口大小的改变而改变...，只和分辨率有关（所以窗口变小了，该div依旧200px，如果窗口不够大会出现滚动条；但是假设分辨率从1024*760改为800*600，此时div依旧200px，那么div会感觉变大了《因为同样大小的屏幕...端打开，参数信息会通过log打出，仅在pc端时才会打印。

1.4K00

制作H5响应式页面注意事项、微信二次分享

1.3.2     切图时，许多东西可以是图片，比如特殊字体、小部分特殊规则说明，用图片的形式避免特殊字体无法显示的窘境。          ...1.3.3     （APP时，PC端无此规则）为防失真，设计给的图片通常都是750px（是Iphone6的屏幕尺寸两倍大《375px》），所以如果用两倍大的图片量尺寸且在iPhone6下做测试，在页面布局的时候要除以...=1像素，如果设置div宽度为100px，假设屏幕分辨率为1024*760，则表示1024分辨率（1024px）中有100px被div占据（分辨率以像素px作为基本单位），这和屏幕大小没有关系，也不随显示窗口大小的改变而改变...，只和分辨率有关（所以窗口变小了，该div依旧200px，如果窗口不够大会出现滚动条；但是假设分辨率从1024*760改为800*600，此时div依旧200px，那么div会感觉变大了《因为同样大小的屏幕...端打开，参数信息会通过log打出，仅在pc端时才会打印。

1.3K90

50张Gif动图演绎 Chrome插件英雄榜

》搭建本地Web服务器, 实现局域网共享文件夹 Web Server for Chrome可以帮我们在本地快速开启http服务,让开发和测试变得更加简单, 如果你想和同处某个局域网的小伙伴...Discoverer(中文译名: 单词发现者),可以突出显示网页上罕见的英语字典词汇和惯用语。...促进英语语言学习并扩大词汇量,通过自动高亮网页单词, 辅助单词记忆是一个很好的路子, 建议过一段时间,就稍微调高不突出显示 最常用的英语单词的数量, 比如从默认的15%调整到16%, 单词发现者与沙拉查词结合使用..., 壁纸也非常精美, 对浏览器颜值有要求的小伙伴, 可以试一试~ 042 在Edge中安装Chrome扩展程序 Edge可以安装绝大多数Chrome商店中的扩展, 但Chrome中的谷歌开发...035《Print Friendly & PDF》让你拥有最佳的打印阅读体验 034《Astro Bot》用新标签页刷编程题 033《一叶》在任意网页开启实时弹幕 聊天窗口 留言板 032《Smallpdf

2.8K40

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。...——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。...1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。...2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。...移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。

10.3K33

必读~苹果iOS小组件Widget设计终极完全指南

如果我的日历上没有剩余事件，则小部件会自动更新以显示明天的摘要。 小组件尺寸 可用的窗口小部件尺寸（称为小，中，大） 无论小部件的大小如何，它都应始终专注于一件事。...点击目标 点按目标是在点击时将执行特定操作的区域。小窗口小部件只有一个点击目标。由于内容有限，我们无法将不同部分深度链接到应用程序的不同部分。中型和大型窗口小部件支持多个点击目标。...Duolingo小部件 请注意小部件中的“ 18h 20m ago”字样。Apple建议不要使用“Last updated X ago（几小时前更新）”字样的语言。...例如，我可以有两个时钟小部件，每个小部件显示我来自不同时区的时间。 黑暗模式 当设备在亮色模式和黑暗模式之间切换时，您的窗口小部件必须随之调整。...如果用户在其设备上使用大的字体，则您的小部件应该能够放大其内容。在Xcode 12上测试不同情况非常简单，我们可以与开发工程师沟通，确保在用户设置不同字体大小的时候，小部件都能有更好的表现。

7.2K30

Web前端知识体系精简——CSS 篇

，在移动端替代fixed的方案是 absolute+内部滚动。...只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。...5、Flex布局 Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。...8、Sprite图 对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络， 然后在css中通过设置background-position来控制显示所需要的小图标...9、字体图标iconfont 所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。

1.3K80

解决Ubuntu下Chrome中文字体混乱问题！

在使用 pyecharts 进行图表渲染的时候，在Ubuntu使用 chrome 浏览器进行图表渲染的时候，发现传入的中文字符或者 Unicode 字符在页面上显示的乱码。...浏览器版本问题 检查浏览器版本，发现使用的 Chrome 版本较旧只有 70 的版本。升级至最新版本（120以上），但问题依然存在。 3....字体问题 考虑到字体是否不支持中文字符，又尝试下载字体，在生成 echarts 图的时候同时设置引入字体。也没有解决问题。 4. 系统中文字体支持 最终在 Chrome 设置中发现系统中缺少中文字体。...通过安装中文字体并刷新系统字体缓存，解决了中文字符乱码的问题。重新生成 echarts 图表时，中文字符能够正常显示。 总结 问题的关键在于系统中缺乏中文字体支持。...即使在浏览器端进行各种调整，如果系统本身不支持中文字符集，问题仍无法解决。因此，确保系统中安装了适当的字体是解决类似问题的关键步骤。 从前ing ​

70610

聊聊调试的那些事，超实用！！！

当然这里说的浏览器是chrome，毕竟"浏览器之多独爱chrome"。...console.assert console.assert() 这个方法接受两个参数，第一个参数是表达式，第二个参数是字符串，只有当第一个参数是false的时候，才会输出第二个参数，否则不会有结果...我们可以在右侧Styles里调整dom元素的各种样式，可以在Element中更换图片和dom节点以及节点的状态 我们也可以在Computed里来看所选盒子模型的状态以及去修改dom节点上的样式属性 03...Sources这个窗口就是我们经常"打断点"的地方了,首先我们先看一下这个窗口的信息，我们主要关注的点，一般有这个几个： 我平时经常用的打断点有两种方法： 1、是在我们的代码中debugger;...，有可能导致数据传输的术后大小比实际的大小还要大。

52010
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券