网络开发工程师通常需要在自己喜欢的编辑器中创建带有CSS和JavaScript的HTML网页。工作流程：
在浏览器中打开本地托管的页面。爆粗口。打开开发者工具来追踪布局和功能问题。调整HTML元素，CSS属性和JavaScript代码以解决问题。将这些更改复制回编辑器，然后返回到步骤1。尽管有了例如实时刷新的工具让这个过程容易了一些，但许多开发者仍然继续在开发者工具和编辑中修改两遍他们的代码。
不过，直接在Chrome中打开和编辑源码文件是可以的。你所做的修改会保存到文件系统，并且会在编辑器中更新展示（假设文件修改时它自动刷新的话）。
第1步：打开开发者工具
打开Chrome，访问一个本地文件系统或者服务器上的页面，然后从更多工具或者根据你的操作系统不同按下F12或Ctrl/Cmd+Shift+I键打开开发者工具。导航到Sources标签可以查看文件浏览器：
你可以在这个视窗里打开和编辑CSS和JavaScript文件，但是任何修改在页面刷新后会丢失。
第2步：把工作区和一个文件夹关联
点击Filesystem标签，然后点击+Addfoldertoworkspace。会出现一个弹出框让你选择文件夹，接下来Chrome会让你确认允许访问这个文件夹。这个浏览器会显示其中的文件，单击文件即可打开：
第3步：编辑并保存代码
现在，你可以进入并编辑代码。未保存的修改在文件标签上标有星号。
CSS的修改会立即生效，但对于HTML和JavaScript通常需要按下Ctrl/Cmd+S保存文件到文件系统中，然后刷新浏览器。
注意你也可以右键点击文件然后选择Saveas…把文件另存一份到别处。
第4步：查看和撤销更改
要查看更改的内容，右键点击一个文件然后从快捷菜单中选择Localmodifications…：
一个对比窗口会展示出来。面板左下角的箭头图标点击后会撤销所有更改，把文件还原到初始状态。
Chrome的开发者工具永远不是编辑器的替代品，但是当你做快速修改或者从另一台没有安装编辑器的电脑上工作时很有用处。