Sources(资源)

2019-02-28 10:00:26
linefo
467
最后编辑:linefo 于 2019-08-29 11:38:27


Sources面板显示相关资源文件


1、左边区域


如图所示


关于Page

这里可以看到资源文件和其路径信息。点击对应的资源文件会在中间区域展示。


关于Filesystem

这里相当于把Devtools当成编辑器来用,点击"Add folder to workspace"可以把本地的目录加进来。

点击对应的文件会在中间区域展示,并且编辑时可以用ctrl + s将文件的改动保存到本地。


关于Overrides

这个相当于把工作区持久化,也是和改动资源文件直接保存到本地相关。具体的后面用到再补充。


关于Content scripts

这里会显示Chrome的扩展引用了什么资源文件。一般用不上。


关于Snippets

“代码”片段的意思。可以用"New snippet"增加一个代码片段,然后这个代码片段就会被保留下来(访问不同的网站都可以用它)。

如果右键代码片段点"run",则是在当前页面使用该代码片段(刷新后失效)。

常用来加载一些库(比如加载jquery?)或者某些专用来调试的代码。


2、中间区域


在这里改资源文件的代码,也会立即在当前页面中生效。和在Element面板中操作的效果一致。


(1)格式化资源文件代码

左下角的这个大括号的按钮(Pretty print),作用是可以格式化资源文件的代码


3、右边区域


这一块其实是debugger调试的操作了。

详细说明在对应章节有。