可通过workspaces来编辑本地文件

workspaces是Chrome DevTools的一个强大功能,这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配,所以你可以直接编辑和保存,而不必复制/粘贴外部改变的文件到编辑器。

为了配置Workspaces,只需打开Sources选项,然后右击左边面板的任何一个地方,选择Add Folder To Worskpace,或者只是把你的整个工程文件夹拖放入Developer Tool。现在,无论在哪一个文件夹,被选中的文件夹,包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效,你可以将页面中用到的文件映射到相应的文件夹,允许在线编辑和简单的保存。

选择响应的代码目录添加后,google会有一个弹出框,点击允许,即可实现再调试模式下编辑代码自动同步本地文件

其他一些chrome开发技巧可参考:

https://www.cnblogs.com/luoruiyuan/p/6479007.html

chrome调试之Workspaces的更多相关文章

  1. Chrome调试手机页面

    新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chro ...

  2. Chrome调试中的奇技淫巧

    网上有关Chrome调试的文章一搜一大堆,本文主要记录一下自己平时经常用并且又比较冷门的一些技巧. 打开Chrome调试工具 1.打开控制台的情况下,长按页面的“刷新”按钮可以选择按何种方式刷新(有正 ...

  3. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  4. chrome 调试 SASS

    第一步: 执行sass预编译命令 先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss  test.scss: ...

  5. chrome调试

    今天对chrome调试又进行了系统的学习. Chrome调试工具developer tool技巧 把以前没有使用过的功能列举一遍. 伪类样式调试:伪类样式一般不显示出来,比如像调试元素hover的样式 ...

  6. chrome调试hove等类似事件

    前台开发过程中经常会用chrome调试代码.但是有的时候,hover或者js控制的属性显示不全 解决办法有两种: 1.根据chrome版本不一样(检查两个字)可能会有所差别 2.图中有标记

  7. chrome调试本地项目, 引用本地javascript文件

    chrome调试本地项目, 引用本地javascript文件 本地文件可以访问本地文件 修改快捷方式属性 C:\Users\xxx\AppData\Local\Google\Chrome\Applic ...

  8. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  9. Chrome 调试动态加载的js

    今天有个同事问到我用chrome调试动态加载js的问题,这个问题之前遇到过,只是时间有点长了,有些忘记.在这里做一下记录: 在要调试的源码的后面加上 //@ sourceURL= debug.js 注 ...

随机推荐

  1. codeforces 696B B. Puzzles(树形dp+概率)

    题目链接: B. Puzzles time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. 「LuoguP3369」 【模板】普通平衡树 (用vector乱搞平衡树

    Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入 x 数 删除 x 数(若有多个相同的数,应只删除一个) 查询 x 数的排名(排名定义为比当前 ...

  3. NOIP2004题解

    传送门 考查题型 dp 搜索 模拟 数据结构堆 贪心 T1   津津的储蓄计划 题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300元钱,津津会预算这个月的花销,并且总能做到实际花销和 ...

  4. 嵌入式Linux学习方法——给那些彷徨者(下)

    上一章解决了嵌入式Linux的“学什么”问题,这一章则具体来说一下“怎么学”. 只要做好以下3点: 1.学习顺序.学习任何东西都应该由浅入深,不能一口吃下一个大胖子,得循序渐进.很多刚开始想学习Lin ...

  5. 博客图片失效?使用npm工具一次下载/替换所有失效的外链图片

    前言 大约一个月前,微博的图片外链失效了,以及掘金因为盗链问题也于2019/06/06决定开启防盗链,造成的影响是:个人博客网站的引用了这些图片外链都不能显示. 目前微博和掘金的屏蔽,在CSDN和se ...

  6. C++经典面试题库 附带参考答案

    1.    面向对象的程序设计思想是什么? 答:把数据结构和对数据结构进行操作的方法封装形成一个个的对象. 2.    什么是类? 答:把一些具有共性的对象归类后形成一个集合,也就是所谓的类. 3.  ...

  7. 51nod 1004 【快速幂】

    思路: 掐住最后一位,快速幂一发就好了 #include<cstdio> #include <map> #include<iostream> #include< ...

  8. git 命令参考手册

    你的本地仓库由 git 维护的三棵“树”组成.第一个是你的 工作目录,它持有实际文件:第二个是 缓存区(Index),它像个缓存区域,临时保存你的改动:最后是 HEAD,指向你最近一次提交后的结果. ...

  9. tyvj 1391 走廊泼水节【最小生成树】By cellur925

    题目传送门 题意简化:给你一棵树,要求你加边使它成为完全图(任意两点间均有一边相连) ,满足原来的树是这个图的最小生成树.求加边的价值最小是多少. 考虑Kruskal的过程,我们每次找一条最短的,两边 ...

  10. CDH版本大数据集群下搭建的Hue详细启动步骤(图文详解)

    关于安装请见 CDH版本大数据集群下搭建Hue(hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz)(博主推荐) Hue的启动 也就是说,你Hue ...