概览
今天的主角是Sources面板的Workspace功能，主要提供当前页面中各个Context的资源浏览和修改，上方可以看到五个页签，分别是：
PageFilesystemOverridesContentscriptsSnippets本篇文章将会走个页签的功能，推荐开启Demo网站Sources-Workspace实际操作一遍来理解应用流程情境，阅读本篇文章前建议先了解Sourcemap的观念，可以参考前端Debug技巧系列第9篇Sources-SourceMap。
Page
在浏览器上开启网页时，请求的各种档案如HTML、CSS、JavaScript、图片都可以在Sources面板找到：
档案会以资料夹的形式呈现，方便观察架构，除了网址列开启的Domain之外，还可以看到
来自其他Domain的档案其他Frame如本页面内开启的iframe其他Context，像是ServiceWorker另外也可以透过右上角的选项把所有档案摊平，档名会以a到z排序，如果这样还不够，按下Command+P就可以直接用档名来搜寻。
除了主动开启Source面板，之前介绍过的Elements、Console面板中的CSS、JS以及Network面板内的各个档案请求都能透过点击或是右键选单选择RevealinSourcespanel直接在Sources面板开启档案，反之也能从Page连结到其他面板。
Filesystem
还记得在文章中的Demo网站中修改程式码并存档后，档案名称旁多了一个惊叹号图示吗？
Changestothisfilewerenotsavedtofilesystem
由于直接编辑资源后存档只在当次浏览有效，重整页面就没了，如果要保留修改的部分，势必要提供一个储存空间来记录修改的部分。
若说直接编辑资源是把DevTools当成临时IDE来修改程式码改变网页行为，那Filesystem就是真的把DevTools变成自己的IDE，将程式码修改的部分同步到电脑中。
既然是一个真真切切的IDE，就得准备档案以及环境了，这边帮读者准备了一小包测试用页面，利用Node.js和npxserve.指令可以启动一个简单的Server，在浏览器的位址输入localhost:就能看到网页啰。
开启测试网页后，Sources面板中编辑程式码并存档就会同步到电脑的档案中，重整页面就能看到变化，可以参考以下步骤
下载测试页面档案解压缩后在资料夹内执行npxserve.浏览器开启localhost:，打开DevToolsSourcesFilesystem将下载的资料夹拖入Filesystem，点击上方的「Allow」，档名旁会有绿点修改有绿点的index.html、style.css、index.js并存档就会同步变化
档案旁的小绿点就是和电脑档案连结成功，只要修改就会同步变化
虽然利用DevTools及时编辑HTML、JS、CSS超酷，尤其修改CSS真的非常好用，在浏览器中确定样式就能同步到档案中，快速制作Demo的时候很方便，搭配Sourcemap就算CSS档经过处理还是能够正确编辑，省去了在IDE和浏览器中来回切换的时间。
在DevTools编辑的CSS直接同步到VSCode了
Overrides
相较于Filesystem需要在本地端建立环境，Overrides则是用在没有网站原始码或是网站超大一包不方便自己跑起来等等情况，做到编辑网页内容并测试执行结果。
这次请开启线上版的Demo页面，先切换到Overrides分页，并按下Selectfolderforoverrides，此时会跳出选择资料夹的视窗，先随意选一个资料夹。
刚才选择的资料夹就是存放网页修改内容的位置，这次一样要按下网页允许才能正常运作，直接修改index.js，储存后档名旁会出现了一个紫色的小圆点。
此时重整页面，神奇的事情发生了，Page页签中的index.js
依然是刚才修改过的档案！不一样的是上面的Network面板标签多了警告图示。
档案请求可能被Overrides拦截了
其实就是在说刚刚进行的Localoverrides覆写了原本的Request行为，原本要去
sh1zuku.csie.io/index.js取得的档案被替换为刚才存进电脑的那份index.js。
Overrides和Workspace不同的是index.html
也能够修改，笔者曾经在浏览一个网站时发现有时候页面会突然出错，仔细观察后发现是JavaScript引入顺序的问题，利用Overrides快速测试后马上就找到解法了。
Contentscripts
当下页面中Chromeextensions所引入的ContentScripts都会出现在Contentscripts分页里，不过无法对Contentscripts进行Localoverrides，想要修改Contentscripts的行为得在第一行下断点，重整后就能编辑来改变JavaScript行为了。
Snippets
Snippets就单纯多了，透过+Newsnippet新增Snippet，输入程式码后在Snippet的右键选单中按下Run就会执行JavaScript。
用Snippet执行JavaScript能够拥有Console的特性，如Useractivation、Consoleutilities。
Snippet用在执行一些自订的小工具，例如列出目前页面上所有图片的src或是自动填入表格等等，不过比起另外开启DevTools来执行Snippet，笔者更倾向把Snippet放在书签列，点一下书签就会执行里面的内容。
复制以下的程式码再拖曳到书签列，按一下试试效果吧！
小结
今天完整介绍了Workspace的各个功能，不知道读者是否有过想要修改当下浏览的网页行为却不知道怎么下手的经验呢？赶快用刚刚提到的技巧去试试看吧！
此外本篇文章提及了断点的应用，下篇文章会有更加完整的断点介绍以及实际应用例子哦。
#debug#