首页
学习
活动
专区
圈层
工具
发布

JavaScript 开发者需要了解的15个 DevTools 技巧

首先,从 DevTools 菜单中的 More tools 子菜单中打开 Coverage 。重新加载页面,面板将用条形图显示未使用代码的百分比: ?...选择: subtree modifications 监听元素或子元素的更改 attribute modifications 监听元素的属性(如class)何时更改 node removal 监听元素何时从...要在 Chrome DevTools 中停止无限循环,可以打开 Sources 面板,然后单击调试暂停图标以停止脚本。按住相同的图标,然后选择方形停止图标就可以停止脚本执行。 ? 12....DevTools 显示了很多信息,但是有时你需要重新运行一次 Ajax 调用。你可以右键单击任何一个请求,然后从 Copy 子菜单中选择一个选项: ?...可以在 Chrome 中或使用任何代码编辑器来编辑文件,每当重新加载页面时,都将使用更新的版本。 14. 管理客户端存储 网页可以使用多种技术将数据存储在客户端上。

7K20

快速美化您的桌面(win 仿制 mac)

主题用于更改壁纸、配色、资源管理器、按钮、进度条等的样式;为达到最佳的展示效果你还需要调整视觉效果为最佳外观,部分主题还需要更改项目显示大小为100%;所有主题安装后均保存在C:\Windows\Resources...OldNewExplorer压缩包并且解压到C盘符的根目录下,进入文件夹找到OldNewExplorerCfg.exe文件,右键 – 以管理员身份运行,然后按照 如下图勾选,点击安装,关闭所有文件夹,重新打开即生效...如果你习惯了Win10资源管理器上强大的功能区,不需要花哨的资源管理器背景图,可以不安装此软件;如果你下载的主题压缩包内含有OldNewExplorer设置图,请打开此软件对比图片勾选,关闭所有文件夹重新打开即生效...3.5、更改系统图标 致美化 官网目前有两种图标包:iPack、7tsp ,可以一次性更改90%的系统图标,包括此电脑、硬盘、文件夹等常见图标,两种图标包的使用方法均不相同,使用前必须查阅相应教程;其中...iPack图标包为.exe安装程序,兼容全部Win10系统,但风险较高;7tsp图标包为.7z文件,需要借助7TSP GUI加载,仅兼容Win10 1903/1909,风险较低。

3.6K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【前端】前端学习必备之Chrome调试代码技巧

    在菜单栏中点击 Chrome 浏览器右上角的 三个点图标,依次选择 更多工具 -> 开发者工具。...左边展示的是页面的 DOM 树结构,右边展示的是对应的 CSS 样式,可以随时更改来查看效果。...2.3 刷新页面 在调试时,有时需要频繁刷新页面查看效果,可以使用以下方式进行刷新: 普通刷新:按下 F5 键,这会重新加载页面缓存,并非强制刷新。...强制刷新:按下 Ctrl + F5,强制刷新会忽略缓存,重新加载所有资源,适用于样式和脚本更新后没有即时生效的情况。 3....这些修改是即时生效的,方便我们对页面进行实时调试。 添加元素:可以通过右键菜单选择 Add attribute 或 Edit HTML 来添加或者修改元素的属性。

    2.1K11

    带有桌面和推荐软件的 Raspberry Pi OS免费下载

    * Overscan 现在由 KMS 下的 xrandr 管理,可以为两个显示器独立设置,并且即时生效而不需要重新启动 * GTK3 开关控制现在用于代替成对的单选按钮 * piwiz -...首次启动向导现在作为具有不同图形的不同用户在单独的会话中运行 * piwiz - 首次启动向导现在可以自动配对可发现的蓝牙鼠标和键盘 * lxinput - 键盘延迟和重复设置现在在 mutter 下重新启动后仍然存在...* 文件管理器视图选项简化为列表或图标,带有单独的缩略图菜单选项 * 新的文件管理器工具栏图标 * KMS 用作默认显示驱动程序 * 修改 HDMI 音频输出选择以支持上述内容 *...,而无需在每个操作之间关闭 * 错误修复 - 从面板菜单图标选择对话框误导文件浏览器 - 图标现在必须在图标主题中,而不是任意文件 * 错误修复 - 主菜单中的项目未翻译 * 错误修复 -...MagPi 网络链接 * Chromium 为 PDF 文件设置了默认应用程序 * 使用的 lxpanel 插件的常用图标加载代码 * 增加了意大利语翻译 * 鼠标指针初始移动到菜单按钮禁用

    5.6K20

    Mirages主题帮助文档

    插件下载地址 备用下载地址 侧边栏菜单怎么配置? 侧边栏菜单的内容来源于你的独立页面,新增或删除独立页面后,侧边栏菜单会相应更改。 侧边栏菜单如何排序?...侧边栏菜单的内容来源于你的独立页面,所以你可以在 管理 -> 独立页面 对独立页面进行隐藏、排序等操作,侧边栏菜单会相应更改。 侧边栏头像怎么修改?...注意仅在当前文章页生效。 自定义 JS 字段名:js 自定义 js。注意仅在当前文章页生效。 显示文章目录树 字段名:showTOC 1.7.2 及以上版本请使用「显示文章目录树」设置。...该选项仅在「主题字体加载方式」设置为「主题内置」的情况下生效。...设置名:alwaysShowDashboardInSideMenu 说明 该选项目前仅在侧边栏生效 默认情况下,在你后台(Admin)保持登录状态时,将会在侧边栏显示「Dashboard」菜单可以快速进入后台

    12.1K20

    chrome浏览器插件开发快速入门

    如果不包含扩展程序图标 系统将会为该扩展程序创建一个通用图标。 固定该扩展程序 默认情况下,当您在本地加载扩展程序时,它会显示在扩展程序菜单 ( ) 中。...固定扩展程序 点击扩展程序的操作图标(工具栏图标);您应该会看到一个弹出式窗口 Hello World 扩展程序 重新加载扩展程序 返回代码,将扩展程序名称更改为“Hello Extensions..., ... } 保存文件后,若要在浏览器中查看此更改,您还必须刷新扩展程序。...前往 进入“扩展程序”页面,然后点击开启/关闭切换开关旁边的刷新图标: 何时重新加载扩展程序 下表显示了需要重新加载的组件才能看到更改: 扩展程序组件 需要重新加载扩展程序 清单 是 Service...当 Chromium 源代码加载完毕后,此 npm 软件包会自动更新 更改。 要点:经常更新此 npm 软件包,以便使用最新的 Chromium 版本。

    1K10

    【干货】Chrome插件(扩展)开发全攻略

    开发中,代码有任何改动都必须重新加载插件,只需要在插件管理页按下Ctrl+R即可,以防万一最好还把页面刷新一下。...再来看devtools.js的代码: // 创建自定义面板,同一个插件可以创建多个自定义面板 // 几个参数依次为:panel标题、图标(其实设置了也没地方显示)、要加载的页面、加载成功后的回调 chrome.devtools.panels.create...alert(JSON.stringify(resources)); }); }); 调试技巧 修改了devtools页面的代码时,需要先在 chrome://extensions 页面按下Ctrl+R重新加载插件...,然后关闭再打开开发者工具即可,无需刷新页面(而且只刷新页面不刷新开发者工具的话是不会生效的)。...option(选项页) 所谓options页,就是插件的设置页面,有2个入口,一个是右键图标有一个“选项”菜单,还有一个在插件管理页面: ? ?

    13K40

    李洋个人博客《mxlee》zblog主题-梦想家(精品推荐)

    V、文章推荐,留言、热门标签等不在使用缓存,后台设置完成直接生效。 V、热门评论(图文显示,默认调用4篇)和热门文章天数采用同一接口。 V、优化PHP部分逻辑代码。...关于右侧项目介绍模块设置教程: 首先找到左侧菜单,模块管理,点击新建模块 设置名称(可自定义)文件名和ID“divproject”不可更改,设置如图: 类型选择“UL”,正文内容如下(部分名称和链接自己修改...新增文章页显示评论功能,如图:(仅在文章页面显示,其他页面没有) --.  彻底解决打开网页CPU飙升的BUG,关闭输入特效。...更新后如图: 修改后如图:图标一栏填写“fa-users”网址填写:/feed.php 关于font图标,博客上有教程,自己参照:奥森图标传送门 --.新增移动端友情链接; --.优化广告展示方案...PS:没有熊掌号的站长可以关闭此项,如果熊掌号ID不正确,文章页不会显示关注按钮; 百度熊掌号关注功能仅在移动端显示。

    3.4K20

    用Python写静态博客

    每当您保存更改时,它甚至会自动重新加载并刷新您的浏览器。 易于定制 通过自定义主题,让您的项目文档以您希望的方式查找。...dev-server还支持自动重新加载,并且只要配置文件,文档目录或主题目录中的任何内容发生更改,都将重建文档。...docs/index.md在您选择的文本编辑器中打开文档,将初始标题更改为MkLorum,并保存更改。您的浏览器将自动重新加载,您应该立即看到更新的文档。 现在尝试编辑配置文件:mkdocs.yml。...将site_name设置更改 为MkLorum并保存文件。 site_name: MkLorum 您的浏览器应立即重新加载,您将看到新的站点名称生效。 ?...更改Favicon图标 默认情况下,MkDocs使用MkDocs favicon图标。

    2K20

    前端-10款web动画插件

    今天给大家带来了十款web前端动画插件,大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载。...类似的菜单插件还有CSS3侧边栏单页切换小图标菜单和CSS3侧边栏手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ?...6.CSS3弧形曲线循环菜单导航 菜单项图标高亮 今天给大家带来一个非常富有创意的CSS3菜单导航插件,它与我们平常看到的横向菜单或者纵向菜单都不同,它的菜单项是沿着一段弧形曲线分布的,同时有两个上下切换的按钮...,当切换到某一个菜单项时,菜单项会沿着曲线移动到当前视窗,同时显示对应的小图标,更重要的时,菜单项的切换是循环的,因此使用起来也非常方便。...10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了,特别是垂直手风琴菜单更为常见,比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。

    7.3K50

    Gizmos菜单_gi clamp

    要更改网格的颜色,去团结 > 首选项 > 颜色,改变网格设置。 此选项仅在“场景”视图Gizmos菜单中可用; 您不能在游戏视图Gizmos菜单中启用它。 参见显示网格,下面,图像和更多信息。...此选项仅在“场景”视图Gizmos菜单中可用; 您不能在游戏视图Gizmos菜单中启用它。 见选择外形及线材的选择,下面,图像和更多信息。...此选项仅在“场景”视图Gizmos菜单中可用; 您不能在游戏视图Gizmos菜单中启用它。 见选择外形及线材的选择,下面,图像和更多信息。...要更改网格的颜色,去团结 > 首选项 > 颜色,改变网格设置。...单击此按钮显示图标选择器菜单,您可以在其中更改脚本的图标。 注意:如果在列表中的项目有一个小物件,但没有图标,没有在图标列的选项。

    5.3K10

    Bootstarp

    bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet"/> jquery...script src="assets/plugins/bootstrap/js/bootstrap.min.js"> 窗口随系统尺寸Grid最多分为12列 网格系统     1,table ,加载完所有...,显示表格     2,div+css,加载一点,显示一点:操作难度大 移动设备策略      媒体查询,(渐进增强:向上兼容)内容先显示 行必须放在.container class内 内容放在列内,列是行的直接子元素...screen and (max-widthj:480px){     .a{display:none} //当小于480px时样式起作用     } 就近原则:标签内style 与class 默认style生效...important可强制生效,当(用style)更改bootstrap的css时,即会失效 矢量图标:bootstarp本身已过时,可扩展,找到font加入对应css https://icons8.com

    1.4K20

    jQuery的ztree仿windows文件新建和拖拽效果

    前面的话:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。...想要实现的效果: 需要的功能: 1:首先实现一颗jQuery的ztree的树形菜单,这个很简单,直接引用官方文档即可 2:点击新建组的按钮,会出现一个input对话框,填写想要新建的名称,在树形菜单上添加了一个父节点菜单.../common/ztree/js/jquery.ztree.all.min.js"> 2:html界面,有新建组的按钮和盛放树形菜单的容器,还有填写文件名的input框以及提交按钮。...', success : function(data) { $("#addgroup").hide(); // 重新加载...原文作者:祈澈姑娘;技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。

    62500

    自定义Linux桌面,还有这么多玩法?

    但是,如果要更改为新安装的主题,则必须安装GNOME Tweaks工具。 您可以在外观部分找到主题和图标设置。您可以浏览可用的主题和图标,并设置您需要和喜欢的。这些变化会立即生效。 ?...03 控制桌面图标 至少在Ubuntu中,您会在桌面上看到Home和Trash图标。如果您不喜欢,可以选择禁用它。您还可以选择设置要在桌面上显示的图标。 ?...05 更改字体和缩放比例 您可以在Ubuntu中安装新字体,并使用Tweaks工具应用系统范围的字体更改。如果您认为桌面上的图标、文本太小,也可以更改缩放比例。...您可能必须重新启动Ubuntu才能生效。如果您是Emacs爱好者,还可以从Emacs强制进行键盘绑定。 07 更改电源设置 这里只有一种电源设置。盖上盖子后,您可以将笔记本电脑置于待机模式。 ?...如果将鼠标放在应用程序窗口上,则会注意到其菜单显示在顶部面板中。如果您不喜欢它,可以将其关闭,然后应用程序菜单将在应用程序本身上可用。

    3.4K10

    Z-BlogPHP开运锦鲤前来报道(更新说明及操作教程,必看文章)

    Js+CSS无加密,购买后可二次开发(因二次开发而导致的网站错版,无法打开等问题均不在售后范围之内,可有偿提供技术支持!)。 7.模板采用图片延迟加载技术、视觉滚动等相关特效。...V、顶部导航背景色(黑色)更改渐变白,增加导航内部阴影效果。 V、优化关闭文章侧栏,文章相关推荐图片被拉伸的BUG。 V、优化导航栏二级菜单显示效果。...注意,缓存文件仅在此种情况下(编辑修改文章,成功发表评论)才会生成最新的数据,如没有以上操作,缓存时间则是上次生成的时间。...模块管理,找到友情链接和图标汇集,然后修改名称: ----、更新屏幕尺寸1200像素时,轮播右侧图文显示错位的BUG, ----、文章没有图片也未使用自定义缩略图时的默认图片更改为随机显示图片(1-...哦对了,顶部登录更改了,变成在导航栏,这样简洁而且很好看。

    4.7K30

    提升 HarmonyOS 开发效率:DevEco Studio 6.0 热更新调试模式全指南

    —— 效率提升看得见 热更新调试(Hot Reload)的核心目标,是通过 “增量构建” 替代 “全量编译”,大幅缩短代码修改后的生效时间。...Studio 6.0 不会重新编译整个项目,而是仅对修改的代码片段进行分析,生成 “增量补丁包”。...适用于修改全局变量、初始化配置等 “仅在应用启动时加载”的内容 —— 这类内容的生命周期贯穿整个应用运行过程,无法在运行中动态替换。...DevEco Studio 的工具栏或应用运行界面,会出现一个带有 “H” 图标的热更新按钮; 后续修改 UI 代码后,点击该 “H”按钮,即可触发热更新,即时看到修改效果。...此后,只要修改代码后按 “Ctrl+S” 保存,DevEco Studio 6.0 会自动触发热更新,实现 “修改 - 保存 - 生效” 的无缝衔接。

    34310
    领券