开发者调试工具Chrome Workspace

Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率

配置Chrome Workspace功能

Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中。 由于Chrome并不知道当然文档对应用的文件为哪个,所以需要配置Workspace的映射关系来告诉Chrome对哪个文件做修改 使用Workspace条件:

  • Chrome V31+(正式版)
  • 本地服务器开发

1.点击F12工具的设置按钮

2.点击左侧的workspace

3.点击Add folder

4.选择服务器所在的根目录,之后确定会chrome会在上面做出一个提示,点击允许

5.

双击下图所示的地方,配置映射关系

6.填写映射关系,视具体情况填写,注意右边的/一定要填写(关键性步骤)

然后点击空白处,完成填写

7.然后回到一个页面中去,试着去更改一个样式数值,然后打开你的样式文件,验证是否生效

注意Workspace只对外部引入的CSS样式有效!

参考:

http://www.cnblogs.com/terrylin/p/3629751.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程之旅

Vim——使用NerdTree来畅快的打开文件吧

在上一章我介绍完用Vundle来管理Vim中所有的插件后,今天我又要强推一个Vim的文件管理插件Nerdtree,相信所有使用Vim的同学都知道文件管理插件Ne...

6392
来自专栏张善友的专栏

快速比较和合并文件

由于开发人员使用的应用程序源代码是一组文件,因此我们经常需要比较文件或文件夹的不同版本,或许还要对其进行同步。例如,您可能需要确定自上次生成后修改了哪些文件,或...

19310
来自专栏赵俊的Java专栏

Hexo搭建 --- 3、Hexo发布文章详解

2182
来自专栏梦里茶室

【Chromium中文文档】Chromium多进程架构

问题 构建一个从不会挂起或崩溃的渲染引擎几乎是不可能的。构建一个完全安全的渲染引擎也是几乎不可能的。 在某种程度上,web浏览器当前状态就像一个与过去的多任务操...

3755
来自专栏一“技”之长

iOS 封装静态库(.a文件) 原

iOS中导入外部文件,一种是将源码导入,一种是导入静态库,有很多第三方库都是以静态库的形式提供给我们使用的,如何制作一个静态库呢?

953
来自专栏黑白安全

burpsuite检测xss漏洞 burpsuite实战指南

XSS(跨站脚本攻击)漏洞是Web应用程序中最常见的漏洞之一,它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的ht...

8022
来自专栏电光石火

安卓SDK无法下载、无法联网API下载

Android SDK无法下载,因为国内google被屏蔽了,需要通过一些服务器进行访问。 需要配置win7的hosts文件: 打开地址:C:\...

2055
来自专栏Flutter入门到实战

Flutter从配置安装到填坑指南详解

在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。

2.6K5
来自专栏Flutter入门到实战

老司机带你快速上手调试Flutter项目

在讲解调试工具之前,先来看看有关的设置选项,点击菜单栏File-->Settings-->Languages & Frameworks --> Flutter,...

5873
来自专栏逸鹏说道

01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)

LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:h...

3626

扫码关注云+社区

领取腾讯云代金券