概览

今天的主角是Sources 面板的Workspace 功能，主要提供当前页面中各个Context 的资源浏览和修改，上方可以看到五个页签，分别是：

Page
Filesystem
Overrides
Content scripts
Snippets
本篇文章将会走个页签的功能，推荐开启Demo网站Sources - Workspace实际操作一遍来理解应用流程情境，阅读本篇文章前建议先了解Source map的观念，可以参考Sources - Source Map & File Editing。

Page

在浏览器上开启网页时，请求的各种档案如HTML、CSS、JavaScript、图片都可以在Sources 面板找到：

档案会以资料夹的形式呈现，方便观察架构，除了网址列开启的Domain 之外，还可以看到

来自其他Domain 的档案
其他Frame 如本页面内开启的 iframe
其他Context，像是ServiceWorker
另外也可以透过右上角的选项把所有档案摊平，档名会以a到z排序，如果这样还不够，按下Command+P就可以直接用档名来搜寻。

除了主动开启Source面板，之前介绍过的Elements、Console面板中的CSS、JS以及Network面板内的各个档案请求都能透过点击或是右键选单选择Reveal in Sources panel直接在Sources面板开启档案，反之也能从Page连结到其他面板。

Filesystem

还记得在上一篇文章中的Demo网站中修改程式码并存档后，档案名称旁多了一个惊叹号图示吗？

Changes to this file were not saved to file system

由于直接编辑资源后存档只在当次浏览有效，重整页面就没了，如果要保留修改的部分，势必要提供一个储存空间来记录修改的部分。

若说直接编辑资源是把DevTools当成临时IDE来修改程式码改变网页行为，那Filesystem就是真的把DevTools变成自己的IDE，将程式码修改的部分同步到电脑中。

既然是一个真真切切的IDE，就得准备档案以及环境了，这边帮读者准备了一小包测试用页面，利用Node.js和npx serve .指令可以启动一个简单的Server，在浏览器的位址输入localhost:5000就能看到网页啰。
　
开启测试网页后，Sources面板中编辑程式码并存档就会同步到电脑的档案中，重整页面就能看到变化，可以参考以下步骤

下载测试页面档案
解压缩后在资料夹内执行 npx serve .
浏览器开启localhost:5000，打开DevTools > Sources > Filesystem
将下载的资料夹拖入Filesystem，点击上方的「Allow」，档名旁会有绿点
修改有绿点的index.html、style.css、index.js 并存档就会同步变化

档案旁的小绿点就是和电脑档案连结成功，只要修改就会同步变化

虽然利用DevTools 及时编辑HTML、JS、CSS 超酷，尤其修改CSS 真的非常好用，在浏览器中确定样式就能同步到档案中，快速制作Demo 的时候很方便，搭配Source map 就算CSS 档经过处理还是能够正确编辑，省去了在IDE 和浏览器中来回切换的时间。

在DevTools 编辑的CSS 直接同步到VS Code 了

Overrides

相较于Filesystem 需要在本地端建立环境，Overrides 则是用在没有网站原始码或是网站超大一包不方便自己跑起来等等情况，做到编辑网页内容并测试执行结果。

这次请开启线上版的Demo页面，先切换到Overrides分页，并按下Select folder for overrides，此时会跳出选择资料夹的视窗，先随意选一个资料夹。

刚才选择的资料夹就是存放网页修改内容的位置，这次一样要按下网页允许才能正常运作，直接修改index.js，储存后档名旁会出现了一个紫色的小圆点。

此时重整页面，神奇的事情发生了，Page页签中的index.js依然是刚才修改过的档案！不一样的是上面的Network面板标签多了警告图示。

档案请求可能被Overrides 拦截了

其实就是在说刚刚进行的Local overrides覆写了原本的Request行为，原本要去sh1zuku.csie.io/index.js取得的档案被替换为刚才存进电脑的那份index.js。

Overrides和Workspace不同的是index.html也能够修改，笔者曾经在浏览一个网站时发现有时候页面会突然出错，仔细观察后发现是JavaScript引入顺序的问题，利用Overrides快速测试后马上就找到解法了。

Content scripts

当下页面中Chrome extensions所引入的Content Scripts都会出现在Content scripts分页里，不过无法对Content scripts进行Local overrides，想要修改Content scripts的行为得在第一行下断点，重整后就能编辑来改变JavaScript行为了。

Snippets

Snippets就单纯多了，透过+ New snippet新增Snippet，输入程式码后在Snippet的右键选单中按下Run就会执行JavaScript。

用Snippet 执行JavaScript 能够拥有Console 的特性，如User activation、Console utilities。

Snippet用在执行一些自订的小工具，例如列出目前页面上所有图片的src或是自动填入表格等等，不过比起另外开启DevTools来执行Snippet，笔者更倾向把Snippet放在书签列，点一下书签就会执行里面的内容。

复制以下的程式码再拖曳到书签列，按一下试试效果吧！

小结

今天完整介绍了Workspace 的各个功能，不知道读者是否有过想要修改当下浏览的网页行为却不知道怎么下手的经验呢？赶快用刚刚提到的技巧去试试看吧！

此外本篇文章提及了断点的应用，下篇文章会有更加完整的断点介绍以及实际应用例子哦。