谷歌浏览器的workspace(工作区)功能

教程 a'ゞ『完美』 3年前 (2016-09-11) 2763次浏览 已收录 2个评论 扫描二维码

写在前面

最近做的项目,前段调试起来实在是太不方便了。记得谷歌好像有个挺方便的功能可以帮忙。

这个功能就是:

我们以前调试 css 的时候,在控制台修改样式以后,都要复制一份,然后再去编辑器里面修改对应的 css,这样感觉很是繁琐,而 workspace 可以让我们直接在控制台修改以后,不需要再去编辑器修改,相当于直接修改的源文件。先来看看吧!

首先我的目录结构是这样的

谷歌浏览器的 workspace(工作区)功能
项目名叫做 Test。根目录有 index.html 文件,有 css,js,img 文件夹。

在“谷歌”浏览器打开页面

编辑 index.html 文件。写个 h1 标签,内容为“a’ゞ『完美』”。
然后在“谷歌”浏览器打开页面。然后打开控制台。

控制台的 Sources

首先看看控制台的样式。
谷歌浏览器的 workspace(工作区)功能
我在 css 文件里面给 h1 加了个红色的字体颜色。然后我们选择控制台的 Sources 选项,找到 css 文件。
谷歌浏览器的 workspace(工作区)功能
然后在这个左面的文件夹上右键选择 Add folder to workspace。
谷歌浏览器的 workspace(工作区)功能
找到项目文件夹,点击确定。
谷歌浏览器的 workspace(工作区)功能
然后会有请求文件夹权限的提示,点击允许。
谷歌浏览器的 workspace(工作区)功能
然后就会看到 Sources 里面变成这样了,多了个深色的项目文件夹。然而原本的 css,index.html 等不见了。
谷歌浏览器的 workspace(工作区)功能
然后我们在这个多出来的项目文件夹里面,选择 index.html 文件,右键选择。。。。。。
谷歌浏览器的 workspace(工作区)功能
出来一个选框,点击和选中的 index.html 路径一样的。
谷歌浏览器的 workspace(工作区)功能
接下来就是见证奇迹的时刻了。我们回到 Elements 选项,修改 h1 的样式。
谷歌浏览器的 workspace(工作区)功能
改为绿色,然后回到编辑器。提示更新。
谷歌浏览器的 workspace(工作区)功能
选择是,发现里面的内容就变成我们修改过的了。
谷歌浏览器的 workspace(工作区)功能
怎么样,是不是很强大。其实也可以选择 css 文件,然后关联 css。而且,我发现,直接在 Elements 修改 html 并不会起作用,还是要去 Sources 里面修改然后保存,这样 html 也可以同步了。js 也是和 html 一样的方式。


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明谷歌浏览器的 workspace(工作区)功能
喜欢 (17)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 陌尘2016-09-14 11:37 回复 Linux | Chrome 37.0.0.0
  2. 不错
    rexhang2016-09-12 00:20 回复 Windows 8.1 | Chrome 52.0.2743.116