基于Chrome Developer Tools的JavaScript开发与调试

1. 输入chrome://flags，启用：Developer Tools experiments（开发者工具实验）
2. 重启Chrome，按F12，点击设置按钮，切换至Experiments，勾选 File system folder in Source Panel
3. 重启Chrome，按F12，点击设置按钮，切换至Workspace，添加文件系统与URL的映射关系
   1. 找到需要支持双向同步的Eclipse Maven项目的webapp目录，例如：D:\JavaEE\projects\eclipse\3.7.2\sshe-static\src\main\webapp
   2. 打开CMD窗口，依次执行：
      
      MS DOS

      1 2	PUSHD D:\JavaEE\projects\eclipse\3.7.2\sshe-static\src\main\webapp ECHO  > .allow-devtools-edit

   3. 确认.allow-devtools-edit已经加入到svn:ignore中，不能提交到代码库
   4. 在Chrome Workspace设置中，添加File Systems：D:\JavaEE\projects\eclipse\3.7.2\sshe-static\src\main\webapp，注意结尾不能有斜杠
   5. 在Chrome Workspace设置中，添加Mappings，左侧输入服务器URL，该URL与上述文件系统目录正好要对应，例如http://localhost:8080/sshe-static，右侧填写与上一步File Systems一致的内容。点击加号保存
   6. 重启Chrome DevTools
4. 测试文件系统——URL映射是否配置成功
   1. 打开Eclipse，启动一个Server，用Chrome打开某个页面
   2. 点击F12，按Ctrl+O，输入某个映射的JavaScript文件的名字，如果映射成功，那么只会显示一个本地文件，否则显示一个本地文件、一个服务器文件
   3. 在Chrome的源代码编辑器里，对上述的本地文件进行修改，立即反馈到Eclispe
   4. 在Eclipse中，对上述本地文件进行修改，立即反馈到Chrome中，并自动加载脚本到Chrome内存
5. 设置Eclipse -  General - Workspace ，勾选Refresh on access
6. 如果觉得Chrome源代码编辑器字体太小，可以编辑：C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css文件，添加代码：
   
   CSS

   1 2 3 4

   body.platform-windows .monospace, body.platform-windows .source-code {     font-size: 10pt !important;     font-family: Consolas, Lucida Console, monospace; }

1. 打开目标网页，按F12，点击设置
2. 切换到Workspaces面板，点击Add folder，输入Eclipse Maven项目的webapp目录，例如：D:\JavaEE\projects\eclipse\4.3.2
3. 选中刚刚添加的目录，点击Edit按钮，进行文件系统与URL的映射，例如：http://192.168.0.89:6060/sshe-static/映射到sshe-static\src\main\webapp
4. 关闭设置弹出框，切换到Sources面板，可以看到URL 192.168.0.89:6060下sshe-static目录消失了
5. 陆续完成所有URL的映射
6. 分别在Eclipse、Chrome DevTools里面修改JS文件进行测试，确认修改可以双向自动同步

注意勾选Call Stack面板的Async复选框。