网站程序源码代码修改方法 Chrome编辑与调试

92建站   2023-01-16   收藏本文

很少有开发者慎入研究浏览器的 "开发者工具 ",现在浏览器的开发者工具有一系列令人望而生畏的复杂功能,可以让Chrome作为完整的开发环境。我们不太可能放弃VS Code 或者Sublime Text 等编辑器。但是如果在别人的电脑上或需要编辑简单的代码时,浏览器是一个不错的选择。

下面几节介绍如何使用 Chrome 的编辑和调试工具。 Chromium, Edge, Opera, Vivaldi, 和 Brave 等浏览器使用的引擎和工具与Chrome一样。根据浏览器和系统不同,可以通过菜单或者快捷键打开开发者工具 window 下按 F12 mac 系统 shift + command + C 打开并定位到 Element tab 栏 option + command + I 打开并定位到Console栏;Safari 和 Firfox 有不同工具集,它们也有自己的方式来帮助开发者,例如 都有Console和Element等;

快速编辑任何站点

在浏览本地或线上站点的页面时,可以在 Element 元素面版 检查,禁用, 启用,添加,编辑,或删除 CSS选择器或属性:

Sources 面版中可以通过page 栏定位和编辑 CSS 或 JavaScript。

编辑后按 Ctrl / Cmd + S 来保存修改后的内容,请注意保存在了内存中,黄色的警告表示修改不是永久的。

如果你的代码定义了Source maps,你可以打开“Files”(看上面的src 文件夹),但修改后的代码不会在当前页面起作用。但是你可以点击{} 来美化压缩后的代码然后进行编辑。

只有跳转或刷新页面修改就会丢失。幸运的是,Changes 面版可以查看我们的修改内容。 这个面版通过右侧三个点的菜单打开:

虽然无法从 Changes 面板中保存代码,但是可以定位到所有修改后的文件。通过右键选择保存到本地从而导入到自己的项目中。

覆盖站点文件

可以覆盖任何本地开发或者线上的站点文件。 Source -> Overrides + Select folder for overrides:

选择一个电脑中的文件夹,然后点击 允许 这样Chrome 就可以写入了。

返回到 Page面板在任何一个文件中右键 选择 Save for Overides:

这样就会把文件保存到你刚才选择的文件夹中,文件会出现一个紫色小圆圈表示这个文件在本地:

可以点击 {} 来美化压缩的代码,或者做其他修改。修改会立即渲染,因为文件是本地的。只要打开开发者工具,这些变更就会在这个网站上起作用。

Changes 面板仍然显示代码差异,你可以将编辑后的文件复制到自己的项目中,请记住,你编辑的是最终生成后的文件,可能需要对项目中的源码进行响应的编辑。

编辑开发中的源文件

我们可以把Chrome当作一个本地源文件开发的标准文本编辑器,无论使用的是何种构建方式。它提供了大多数基础的编辑功能,行号,撤销/重做,颜色编码,自动提示;启动方式,在Sources 面板中打开 Filesystem 面板,然后点击 + Add folder to workspace:

选择一个本地的项目,然后点击 Allow 这样Chrome 就有了对文件夹的读写权限。我们可以像在编辑器里一样打开和编辑任何文件了:

使用控制台信息调试

一些开发者要求永远不要使用 console.log():因为这样是对源码的修改,并且有更好的调试方式。这是对的,但是我不相信有人会说他永远都没用过它!

商用网站源码

展开