在编辑器去编辑代码，保存以后，你在浏览器上可以看到编辑之后的效果。我们也可以配置一下浏览器，直接在浏览器上去编辑项目里的代码。

右键 ... 选择 检查 .. 打开的就是 Chrome 浏览器的开发者工具 .. 现在是在 Elements ，元素选项卡这里 ..

左边是 html .. 右边是选中的元素上使用的样式 .. 注意，虽然我们在页面上链接是编译好的 css 文件，但是右边这里显示的样式，你会发现会来自编译之前的 sass 文件 ..

这是因为我们的项目在把 sass 编译成 css 的时候，还会生成一个 sourcemap，浏览器通过这个 sourcemap ，就会知道生成的 css 原来对应的 sass 在哪里 ..

点击这个样式的出处 .. 打开的就是这个 sass 文件 ..

现在我们是在浏览器的 sources 选项卡这里 .. 这里会显示一个编辑界面，文件是 navbar.scss .. 位置就是在元素上应用的样式的位置 ..

你可以在这里去编辑样式 ..

如果你想把编辑的结果保存在本地 .. 我们还得配置一下 ...

左边儿有个树形菜单 .. 上面就是页面加载的一些资源 .. styles 就是页面上使用的样式 ..

右键点一下它 .. add folder to workspace .. 把目录放到工作区里 ..

在弹出的窗口这里，找到项目下面的 styles 目录 ... 点一下 允许 ..

其实就是告诉浏览器，你用的 styles 这里的东西，对应的就是我本地上的这个 styles 目录 ..

然后再修改一个地方 .. 比如这个激活菜单项的边框的颜色 ...

保存一下 .. 注意在浏览器上显示的这个激活菜单项的样式的变化 ..

我们在浏览器上对这个 sass 文件的存储，也会保存在本地 .. 在编辑器上打开这个 sass 文件 ... 找到刚才我修改的地方 ..

我在浏览器上做的存储已经保存到本地了 ..

再把这个边框颜色换成原来的黑色 ... 然后再保存一下 ...