From 181e970997ee9fbbe8b089fbb236805cd241a479 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Fri, 20 Apr 2018 09:29:25 +0800
Subject: [PATCH] =?UTF-8?q?add=EF=BC=9Avs=20code=20=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 00-前端工具/03-VS Code.md   | 31 +++++++++++++++++++++++++++++++
 00-前端工具/chrome浏览器.md |  5 +++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md
index 446bdc7..9de387d 100644
--- a/00-前端工具/03-VS Code.md	
+++ b/00-前端工具/03-VS Code.md	
@@ -1,5 +1,19 @@
 
 
+## 常见操作
+
+### 如何查看代码结构
+
+- 方法一：「Cmd + Shift + O」
+
+- 方法二：安装插件`Code Outline`
+
+参考链接：<https://www.zhihu.com/question/264045094>
+
+
+
+
+
 ## 常用插件
 
 方式一：打开VS Code，左侧有五个按钮，点击最下方的按钮，然后就可以开始安装相应的插件了。
@@ -61,10 +75,27 @@
 Sass 文件格式化。
 
 
+### Code Outline：显示代码结构
 
 
+安装好插件「Code Outline」后，可以在左侧的资源管理器中，显示当前文件的代码结构：
+
+![](http://img.smyhvae.com/20180420_0925.png)
+
 参考链接：
 
+- <https://www.zhihu.com/question/50273450>
+
+- <http://itopic.org/vscode.html>
+
+- <https://github.com/varHarrie/varharrie.github.io/issues/10>
+
+
+
+
+
+### 参考链接
+
 - <https://www.jianshu.com/p/0724921285d4>
 
 - <https://www.cnblogs.com/AmosLee94/p/8338013.html>
diff --git a/00-前端工具/chrome浏览器.md b/00-前端工具/chrome浏览器.md
index 9a724c5..7846a24 100644
--- a/00-前端工具/chrome浏览器.md
+++ b/00-前端工具/chrome浏览器.md
@@ -2,9 +2,10 @@
 
 ### show user agent shadow DOM
 
-20180206_1610.png
+![](http://img.smyhvae.com/20180206_1610.png)
 
-20180206_1616.png
+
+![](http://img.smyhvae.com/20180206_1616.png)
 
 把上图中的红框部分打钩。