让谷歌浏览器(chrome)保存调试代码workspace

方法/步骤

  1.  chrome浏览器早期版本的操作方法与我现在要讲的方法有所不同,因此操作前请注意浏览器的版本号。

    示例中的版本号: 53.0.2785.116 m

  2.  任意打开一个需要调试的html文件
    让谷歌浏览器(chrome)保存调试代码workspace
  3.  调出“Developer Tools”工具(ctrl+shift+i)
    让谷歌浏览器(chrome)保存调试代码workspace
  4.  点击sources
    让谷歌浏览器(chrome)保存调试代码workspace
  5.  选中调试文件,点击右键,Add folder to worspace
    让谷歌浏览器(chrome)保存调试代码workspace
  6.  选择当前文件所在目录
    让谷歌浏览器(chrome)保存调试代码workspace
  7.  

    这是浏览器会弹出警告,点击

    让谷歌浏览器(chrome)保存调试代码workspace
  8.  这是关键性的一步,具体操作看下图(map to network resource
    让谷歌浏览器(chrome)保存调试代码workspace
    让谷歌浏览器(chrome)保存调试代码workspace
  9.  映射对应文件
  10.  调试网页,刷新网页,发现修改后的结果被保存,至此配置成功!
    让谷歌浏览器(chrome)保存调试代码workspace

注意事项

  • 注意浏览器的版本
  • css,js文件必须与html文件分离,即不能写html文件内,否则不生效。
posted @ 2017-10-13 10:15  无花即无果  阅读(919)  评论(0编辑  收藏  举报