首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

打开本地HTML文件: Chrome将空格视为新选项卡?

回答:

在Chrome浏览器中,打开本地HTML文件时,如果HTML文件的路径中含有空格,Chrome会将空格视为新选项卡。这是由于URL路径中空格被认为是不合法字符,所以Chrome将其解释为新的URL,尝试在新选项卡中加载该URL。

为了解决这个问题,我们可以采取以下几种方法:

  1. 使用百分号编码替代空格:可以将空格替换为%20,这是URL编码中空格的表示方式。例如,如果HTML文件路径是"D:/My HTML Folder/my%20file.html",Chrome就不会将空格视为新选项卡了。
  2. 使用引号将路径括起来:将HTML文件的路径用引号括起来,例如"D:/My HTML Folder/my file.html"。这样Chrome会正确解析路径,不再将空格视为新选项卡。
  3. 将HTML文件拖拽到Chrome标签页:可以直接将HTML文件从文件管理器拖拽到已经打开的Chrome标签页中,这样Chrome会正确加载该HTML文件,而不会将空格视为新选项卡。

总结: 当在Chrome中打开本地HTML文件时,如果文件路径中含有空格,Chrome会将空格视为新选项卡。为了解决这个问题,可以使用百分号编码、引号括起来的路径或者拖拽文件到Chrome标签页的方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

启用本地文件替代 Chrome 允许任何 HTTP 请求使用你的设备上的本地文件,而不是通过网络获取它。...在本地PC上创建一个目录,在该目录中将存储替代文件,例如 localfiles ,然后打开 Chrome 的 DevTools Sources 面板。...在左侧窗口中打开 Overrides 选项卡,单击 + Select folder for overrides ,然后选择你创建的目录。系统提示你允许文件本地保存,并且目录将出现: ?...现在打开 Page 选项卡并找到任何源文件。...可以在 Chrome 中或使用任何代码编辑器来编辑文件,每当重新加载页面时,都将使用更新的版本。 14. 管理客户端存储 网页可以使用多种技术数据存储在客户端上。

4.8K20

Mac 使用技巧

剪切 command + X 撤销 command + Z 恢复 command + Y 删除 command + delete 显示或隐藏程序坞 command + option + D 查看隐藏的文件文件夹...切换应用 Command + Tab 打开Spotlight Command + 空格键 在访达中进行文件夹搜索 Command + Shift + G 全屏截图 Command + Shift + 3...+ option + I 打开 Chrome 浏览器的开发者工具并进入 JavaScript 控制台 command + option + J 打开 Chrome 浏览器的开发者工具并进入 JavaScript...控制台选项卡 command + option + J 打开 Chrome 浏览器的开发者工具并进入 检测元素选项卡 command + option + C 使用 Chrome 浏览器查看源码 command...+ del VSCode 中常用快捷键 打开终端 control + ` 查询(选定需要查询的内容按快捷键可以快速查询)command + F 在浏览器中打开终端中的链接(鼠标移动到链接上,并按下后面的快捷键

37320
  • ​17 款程序员神级 Chrome 插件,爱了爱了!

    推荐指数:⭐⭐⭐⭐⭐ 下载链接:https://www.chajianxw.com/accessibility/16718.html 为什么你们就是不能加个空格呢? 为什么你们就是不能加个空格呢?...Chrome插件截图3 为什么你们就是不能加个空格呢?Chrome插件截图4 简介:强迫症患者必备。它能自动在网页中所有的中文字和半形的英文、数字、符号之间插入空格。...推荐指数:⭐⭐⭐⭐ 下载链接:https://www.chajianxw.com/product-tool/13516.html 标签管理 Momentum 标签页 Momentum 标签页 Chrome...插件截图1 Momentum 标签页 Chrome插件截图5 简介:每天都会更新一张令人惊叹的自然照片。...当您打开了许多选项卡和窗口时,查找、关闭或切换到所需标签的时候,你可以考虑试试它。

    71110

    浏览器之性能指标_FCP

    Coverage选项卡将被打开。...❞ 分析代码覆盖率 在Coverage选项卡中的表格显示了哪些资源被分析以及每个资源中使用的代码量。点击某一行,可以在Sources面板中打开该资源,并查看逐行分解的已使用代码和未使用代码。...---- 压缩 HTML/CSS/JavaScript ❝压缩是指从网站的HTML、CSS和JavaScript文件中删除冗余字符(如空格)。...❞ 虽然空格使人类更容易阅读和解析,但浏览器和服务器并不需要它们。这些空格仍然是占用字节的字符。通过压缩诸如CSS文件之类的内容,您可以减小页面大小,从而提高页面速度并改善FCP时间。...我们采取的任何降低FCP的措施也降低整体页面速度。因此,几乎可以「将其视为整体性能的信号」。 FP和FCP之间有什么区别? 虽然这两个术语有时可能被交替使用,但从技术上讲,它们是两个不同的指标。

    1.4K30

    Android浏览器跨域数据窃取和Intent Scheme攻击

    攻击实验背景介绍 在我研究Stock浏览器的事务流程标准时发现,如果让浏览器打开选项卡并且使用file://协议,就可以通过网页打开本地文件。...下面的截图展示了漏洞被补后,权限被禁用,想要从菜单栏打开本地文件会发生的错误: 攻击实验方案: 为了利用这个漏洞,我们模拟了以下攻击流程: 1.骗取用户访问黑客构造的网站 2.黑客在某页面设置返回特定头部内容...,使得受害者的浏览器自行下载exploit.html 3.受害者浏览器会主动打开选项卡,浏览exploit.html 4.exploit.html读取本地敏感信息文件,反馈给黑客 为了给这次攻击构造一个有效的...浏览器会自行在选项卡打开刚刚下载的恶意文件exploit.html,然后从其他本地文件里读取内容。实际上,这个攻击过程并不如我讲的这么轻松愉快。...Android 2.3.x观察报告 实验中我们使用了Android 2.3的模拟器,很轻松地就通过恶意文件exploit.html读取到了其他本地文件的内容,这代表该版本系统浏览器存在相应的漏洞,允许恶意网站绕过

    1.5K60

    17 款程序员必备的 Chrome 扩展插件! 提升开发效率!

    推荐指数:⭐⭐⭐⭐⭐ 下载链接:https://www.chajianxw.com/accessibility/16718.html 为什么你们就是不能加个空格呢? 简介:强迫症患者必备。...推荐指数:⭐⭐⭐⭐ 下载链接:https://www.chajianxw.com/product-tool/13516.html 标签管理 Momentum 标签页 简介:每天都会更新一张令人惊叹的自然照片...当您打开了许多选项卡和窗口时,查找、关闭或切换到所需标签的时候,你可以考虑试试它。...当您发现自己有太多的标签页时,单击OneTab图标,所有标签页转换成一个列表。当您需要再次访问这些标签页时,可以单独或全部恢复它们。...推荐指数:⭐⭐⭐⭐⭐ 下载链接:https://www.chajianxw.com/product-tool/11479.html crxMouse Chrome™ 手势 简介:crxMouse Chrome

    1.5K40

    谁说Spring Boot 修改静态资源一定要重启项目才会生效,我看未必

    Spring Boot 中热部署的原理就是当代码发生变化时,base classloader 不变,而 restart classloader 则会被废弃,被另一个的 restart classloader...以 Chrome 为例,在 Chrome 应用商店搜索 LiveReload ,结果如下图: 第一个搜索结果添加到 Chrome 中,添加成功后,在 Chrome 右上角有一个 LiveReload...图标 在浏览器中打开项目的页面,然后点击浏览器右上角的 LiveReload 按钮,打开 LiveReload 连接。...注意: LiveReload 是和浏览器选项卡绑定在一起的,在哪个选项卡打开了 LiveReload,就在哪个选项卡中访问页面,这样才有效果。...页面,然后启动 Spring Boot 项目,在打开了 LiveReload 的选项卡中访问 html 页面。

    1.1K00

    谷歌发布 Chrome 85 稳定版,引入 PGO,页面加载速度提升 10%

    可以折叠和展开以更轻松地查看需要访问的选项卡组。 ? 平板模式下的触摸式选项卡 ?...切换到已经打开的标签页 在 Android 版Chrome 的地址栏中输入页面标题时,如果已经打开该标签,则会看到建议切换到该标签的建议。 ?...使用标签预览更快地找到标签 可以鼠标悬停在标签上并快速查看页面的缩略图预览。目前该功能在 Chrome beta 版本中。 ?...在 Chrome 中填写并保存 PDF 在接下来的几周内,用户将能够直接从 Chrome 填写 PDF 表单并将其与输入内容一起保存。如果再次打开文件,则可以从上次中断的地方继续。 ?...这项的 QR 码功能也将在桌面版 Chrome 中推出,并且可以从 Chrome 地址栏中的 QR 图标进行访问。

    84710

    如何从内存提取LastPass中的账号密码

    同时我也这些密码保存在本机的一份文档中,以便我们之后更方便的进行验证。待所有的密码都存储到Lastpass,且本地副本保存好之后。所有账户注销,清除所有的历史文件和临时文件,最后重启机器。...基本上步骤如下: 打开浏览器 登录LastPass插件 登录网站 检测内存中明文密码的所在 改变操作++ 关闭选项卡++ 重新打开选项卡++ 注销+重复实验 测试1 我知道所有的用户名和密码,我用临时账户登录了第一个站点...通过Facebook的导航我点开几个网页之后,保持浏览器选项卡打开状态,我创建了一个快照。第一次搜索很简单。...二进制文件视为文本文件,并以字符串形式输出到文本文件中。...打开选项卡,关闭选项卡,恢复选项卡。我得出的结论是如果选项卡打开的网页已经完成登录,在大多数情况下能够获取到凭证。当恢复选项卡打开其他的网页,想要找到完整的数据结构就变得很困难了。

    5.7K80

    用 Vue 开发自己的 Chrome 扩展

    后台脚本允许扩展对特定的浏览器事件做出反应,例如创建选项卡。 为了演示这些概念,让我们先写一个“Hello,World!” Chrome 扩展。...你刚刚制作了一个 Chrome 扩展程序。 覆盖 Chrome标签页 为了在打开选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。...Vue添加到扩展 现在我们有一个非常基本的扩展,接下来要实现剩下的需功能了。当用户打开标签页时,我希望扩展能够: 从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。...完成此操作后,重新加载扩展程序并打开选项卡。你应该会看到“My new tab page”。 ?...接下来,你需要为自己的应用创建一个 ZIP 文件。你可以通过 npm run build-zip 在本地执行这项操作。

    2.8K30

    Fiddler实战

    建议装一个SwitchySharp的Chrome插件,为fiddler创建一个规则,代理到本地的8888端口(fiddler所用的端口)。...比如我们现在需要调式线上一个js或者css文件等,我们可以使用fiddler捕获这个文件的请求,然后复制线上一份文件(比如JS或者css)代码放到本地,然后在本地文件(JS或者css)修改完后,替换线上的文件来调式...Show only HTML 的含义是 隐藏Content-Type头不是HTML类型的Session。...Fiddler自带的AutoResponder每条自动响应规则只能对应一个本地文件, 在文件数目较多的时候,使用起来很不方便,往往需要部署到本地web服务,有了Stave插件(扩展),一个URL匹配可以对应一个本地目录...js,如下我本地的目录文件: 现在我们来看看配置如下: 1.

    2.1K10

    Chrome 高级玩法,秒变摸鱼神器

    其实 Chrome 一直有大量的新功能特性在开发中,只是因为 Chrome 用户量太大,功能更新都非常谨慎,新功能都需要在 Chrome 实验室中进行测试,确保完善后才会默认开放。...如果你想提前尝鲜 Chrome 的新功能,可以在地址栏输入 chrome://flags/ 打开 Chrome 实验室,查看开启还在测试中的功能。今天就来推荐几个不错又稳定的新功能。...选项设置为 Enabled 后重启浏览器,之后再把鼠标放到标签页上就会展示网页缩略图了。...现在的下载器都是带多线程下载的,如果你不用 Chrome 的下载器就不必打开这个开关。...最后补充一个冷知识,Chrome 在断网的情况下会出现一只小恐龙,这时候按下空格键小恐龙就会开始向前奔跑,前方会不断出现障碍物,再次按下空格键让小恐龙躲避障碍物。

    72220

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

    ": { // 覆盖浏览器默认的标签页 "newtab": "newtab.html" }, // Chrome40以前的插件配置页写法 "options_page": "options.html...}, } 需要特别说明的是,虽然你可以通过chrome-extension://xxx/background.html直接打开后台页,但是你打开的后台页和真正一直在后台运行的那个页面不是同一个,换句话说...实例:创建一个devtools扩展 首先,要针对开发者工具开发插件,需要在清单文件声明如下: { // 只能指向一个HTML文件,不能是JS文件 "devtools_page": "devtools.html...tabs[0].id: null); }); }); } 本地存储 本地存储建议用chrome.storage而不是普通的localStorage,区别有好几点,个人认为最重要的2点区别是: chrome.storage...参考 官方资料 推荐查看官方文档,虽然是英文,但是全且,国内的中文资料都比较旧: Chrome插件官方文档主页 Chrome插件官方示例 manifest清单文件 permissions权限 chrome.xxx.api

    11.7K40

    使用 Vue.js Devtools 扩展作为 Vue 应用调试工具

    安装扩展 在此之前,我们先来介绍一款 Vue.js 本地开发的调试工具 —— Vue.js Devtools,这是一个浏览器扩展,当前支持 Chrome 和 Firefox 浏览器,你可以在 Chrome...以上篇教程创建的 HTML 文档为例,在 IntelliJ IDEA 中点击在 Chrome 浏览器预览之后,在打开Chrome 浏览器页面通过 Option + Command + I 打开开发者工具...Vue 实例的所有属性和方法,比如在这里,我们可以访问和设置模型变量 name,设置之后,对应的数据值会同步到 HTML 元素上。...另外,如果当前 HTML 页面没用使用 Vue 框架,Vue.js Devtools 扩展会处于未激活状态: 可以看到该扩展的颜色是灰色的,同时在开发者工具的标签页也没有 Vue 选项卡,表示该页面没有使用...好了,关于 Vue.js Devtools 的基本使用学院君先简单介绍到这里,在后续教程中,我们基于它作为开发 Vue 应用的调用工具。

    1.8K30

    浏览器缓存图解

    chrome为例,打开调试面板,找到Application选项卡,就可以看到它所支持的各种缓存模式,如下图: ?...chrome application.png 上图没有http缓存(因为它体现在请求头,在Network选项卡查看更为合适),其实,这恰巧是利用缓存做前端性能优化的重要方法,所以,把它也纳入浏览器缓存表格...NoSQL数据库 不推荐 indexDB HTML5规范50M限制浏览器支持情况不佳 还需等等 Application Cache 通过manifest配置文件本地有选择性的存储JS/CSS/图片等静态资源存储大小...比如,单页面项目中,每次发布JS和CSS文件都可能发生变化(通过在文件名上加hash来指定变化),那么,必须保证每次请求到的HTML文件必须是最新的。...为了便于服务器解析和网站地址的唯一性,我们又不能在HTML文件上应用hash指纹。在这种场景下,就只能使用协商缓存了。

    56410

    Chrome 高级玩法,秒变摸鱼神器

    其实 Chrome 一直有大量的新功能特性在开发中,只是因为 Chrome 用户量太大,功能更新都非常谨慎,新功能都需要在 Chrome 实验室中进行测试,确保完善后才会默认开放。 ?...如果你想提前尝鲜 Chrome 的新功能,可以在地址栏输入 chrome://flags/ 打开 Chrome 实验室,查看开启还在测试中的功能。今天就来推荐几个不错又稳定的新功能。...以前因为设备和带宽的限制,下载文件都是老实的请求一个地址,从文件开头下到结尾,随着带宽的增大,我们可以对同一个同时请求多个下载,比如从文件的1/10/20同时下载,这样才有可能利用满宽带。...现在的下载器都是带多线程下载的,如果你不用 Chrome 的下载器就不必打开这个开关。...最后补充一个冷知识,Chrome 在断网的情况下会出现一只小恐龙,这时候按下空格键小恐龙就会开始向前奔跑,前方会不断出现障碍物,再次按下空格键让小恐龙躲避障碍物。 ?

    1.2K10

    Perfetto 与systrace

    Tracevisualization Perfetto还提供了一个全新的跟踪可视化工具,用于打开和查询长达数小时的跟踪,可从ui.perfetto.dev获得。的可视化工具利用了现代Web平台技术。...打开一次后,Perfetto UI可以完全脱机工作。使用UI打开的跟踪由浏览器在本地处理,不需要任何服务器端交互。...我们可以记录本地分配,并使用heapprofd释放进程执行的 分配。结果配置文件可用于内存使用情况归因于特定的函数调用堆栈,从而支持本机代码和Java代码的混合使用。...完成后,按Ctrl-C结束配置文件。 然后raw-trace文件从输出目录 上载到Perfetto UI,然后单击显示的菱形标记。...默认视图向您显示配置文件运行时完成但尚未释放的所有分配(空格选项卡)。 我们可以看到,在的路径中分配了很多内存 ResourceManager.loadApkAssets。

    3.2K10
    领券