[转]chrome 的devtools 中setting 开启workspace , 也有点用处。不是很大

转载的,原文: http://wiki.jikexueyuan.com/project/chrome-devtools/saving-changes-with-workspaces.html

-------------------------------------------------------------------------------------------------------

通过工作空间保存更改

简介

Chrome DevTools 允许你对页面或者 CSS 做出更改,并且可以实时查看更改效果。但是如果你需要复制外部编辑器中更改的内容并粘贴到 DevTools 时,什么对你才是更加重要的呢?工作空间可以让这些更改暂时存储在硬盘上而不需要离开 Chrome DevTools 界面。

通过工作空间,你可以在 Sources 面板中编辑任何类型的源文件并且将改动保存到硬盘上。并且你可以将资源从本地服务器映射到磁盘上的文件中,当你修改该文件并保存了之后,他们可以照常运行。并且,如果你对映射的设置是正确的,你在 Elements 面板上修改也会自动储存到磁盘上。

将项目放进工作空间(Workspace)中

要在 Sources 面板中编辑本地的源文件,右键点击 Sources 面板的左部并选择 Add Folder to Workspace。该操作会启动一个文件选择框,你可以选择需要的文件夹添加到工作空间中(这并不会将当前高亮显示的文件夹加入到你的工作空间中)。

当 Chrome 顶部出现黄色的提示 "DevTools requests full acess to [path to your folder]" 时,选择 *Allow。

在 Chrome 中,你可以编辑该文件夹下的任何文件以及子文件夹。在这种情况下,“源文件”并只是 HTML、CSS 以及 JavaScript,其指的是任意类型的文件,包括 markdown 以及 JSON。

映射网络资源

工作空间真正有用的地方在于它可以将一个本地文件映射到一个 URL 上(或者是网络资源上)。当 Chrome 加载一个被映射的 URL 时,网络文件夹的内容会被工作空间的文件夹取代。这就好像这些文件是放在网络上一样,但是你可以通过 DevTools 来修改本地文件并保存。

要将你的网站映射到本地工作空间文件夹:

  1. 在 Sources 面板中,右键点击或按住 Control 再点击网站上的文件。
  2. 选择 Map to File System Resource。
  3. 在出现的列表中选择相应的文件(你可以输入文件名或者关键字来找到你想要的文件)。
  4. 在 Chrome 中重新加载页面。

现在 Source 面板中显示的将会是本地工作空间的文件夹,而不是服务器上的内容了。

你可以将该功能用于其他地方,比如将工作空间文件夹映射到 URL 上,或者对网络资源进行映射。要注意,并不是所有从本地映射的网络资源都会载入到浏览器中,但是你的本地文件必须都是可以映射到 URL 的。在工作空间中映射一个文件时应该将该文件映射到该工作空间的大多数站点。

注意事项

工作空间使得你的很多工作变得简单了,并且不需要在 Chrome 和外部编辑器之间切换了。然而,有些东西你需要注意:

  • 只有在 Elements 中改变的样式会被保存。对 DOM 文档做出的修改是不会保存的。
  • 在 Elements 面板中改动的样式会立即保存,该效果就和把 CSS 文件映射到本地的备份文件一样(也就是说,源自 Elements 面板的更改不需要手动保存)。
  • 如果你从远程服务器上将文件映射到本地,当你刷新页面的时候 Chrome 从远程服务器上再次加载文件。你做出的改动保存在硬盘上,并且当你继续在工作空间内对文件进行编辑的时候就会生效。

工作空间的文件管理

使用工作空间的时候,除了编辑已有的文件,你也可以在本地目录中添加或者删除文件。

添加文件

右键点击左边的文件夹并选择 New File。

删除文件

右键点击左边的文件并选择 Delete File。

你也可以选择 Duplicate File 来复制文件。新文件会在 Sources 面板中出现,并且你可以为它输入一个新名称(默认情况下是 “Copy of mufile.txt”)。

刷新

现在你已经在工作空间中直接创建(删除)了文件,源目录会自动刷新并且显示出这些新文件。如果没有显示出来,你可以右键点击一个文件夹然后选择 Refresh 来刷新。

当你在其他的编辑器中对文件做出更改并保存时候,这个方法可以帮助你在 DevTools 刷新文件。一般情况下 DevTools 会自动刷新,即使文件是在外部编辑器中保存的,但是如果你需要重新编译 HTML 或者 CSS 文件,那就需要手动刷新。

搜索文件

如果要在 DevTools 中搜索文件,按Ctrl + O(或者在 Mac 上使用 Cmd + O)来打开一个文件搜索选项框。在工作空间中你也可以这么做,不过它除了会搜索本地文件外,还会搜索工作空间中远程加载的文件。

文件的搜索机制是有很多种的,所以你既可以搜索工作空间中的文件,也可以搜索其他加载到 DevTools 的文件。甚至你可以通过一个字符串或者一个正则表达式来进行搜索,而 Chrome 会找到相匹配的任何文件或者页面。

要通过工作区间中的多个文件来搜索文本:

  1. 按住 Esc 键打开控制台,然后选择控制台旁边的 Search 选项卡来打开搜索窗口。或者按 Ctrl + Shift + F(在 Mac 上使用 Cmd + Opt + F)来打开搜索窗口。
  2. 在搜索框中输入你想搜索的内容,然后按下回车键。如果你查询的是一个常规表达式或者是大小写敏感的内容,请勾选相应的复选框。

工作空间是 DevTools 的新特性,故本文可能没法涵盖到其全部特性,关于工作空间的详细内容请参考开发文档

时间: 2024-08-30 01:25:05

[转]chrome 的devtools 中setting 开启workspace , 也有点用处。不是很大的相关文章

ios7.1后setting中没有开启相机服务应用程序相机预览黑屏问题

if ( [[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0){                                //check whether the permission open for user in settings                AVAuthorizationStatus authStatus = [AVCaptureDevice authorizationStatusForMedia

在 Chrome 开发者工具中调试 node.js

命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node.js 应用程序提供一个简单的界面. 你可以使用 npm 来安装它: npm install -g devtool 在某种程度上,我们可以用它来作为 node shell 命令的替代品.例如,我们可以这样打开一

如何使用 Chrome 和 DevTools 查找影响页面性能的内存问题,包括内存泄漏、内存膨胀和频繁的垃圾回收

了解如何使用 Chrome 和 DevTools 查找影响页面性能的内存问题,包括内存泄漏.内存膨胀和频繁的垃圾回收. TL;DR 使用 Chrome 的任务管理器了解您的页面当前正在使用的内存量. 使用 Timeline 记录可视化一段时间内的内存使用. 使用堆快照确定已分离的 DOM 树(内存泄漏的常见原因). 使用分配时间线记录了解新内存在 JS 堆中的分配时间. 概览 在 RAIL 性能模型的精髓中,您的性能工作的焦点应是用户. 内存问题至关重要,因为这些问题经常会被用户察觉. 用户可通

如何在devtools中找到未使用 JavaScript 和 CSS 代码

GitHub中有更加详细的介绍 https://github.com/daLeiStrive/devtools-docs Chrome DevTools中的Coverage标签可帮助您查找未使用的JavaScript和CSS代码.删除未使用的代码可以加快页面加载速度, 图1.分析代码覆盖率. 总览 运送未使用的JavaScript或CSS是Web开发中的常见问题.例如,假设您要在页面上使用Bootstrap的按钮组件.要使用按钮组件,您需要在HTML中添加指向Bootstrap样式表的链接,如下

在 chrome 开发工具中使用终端

chorme 中的功能越来越强大, 不仅可以编辑文件, 如果能直接使用控制台, 那运行系统命令什么的也都不用再切换窗口了. 这次真的边开发边预览了!目前有两个实现方式, 外部插件版及官方测试版.ps: 希望官方版早点发布. 外部插件版 DevTools Terminal 是一个Chrome DevTools扩展, 它把操作系统终端功能带入到Chrome浏览器中. 你可以在Chrome DevTools开发者工具中使用操作系统终端来完成需要执行的shell命令和操作. $ sudo npm ins

通过私有协议在Chrome浏览器网页中打开本地程序

最近甲方有这样一个需求:两套系统,一套基于Chrome开发,一套基于IE开发,想要在Chrome中增加一个链接,然后进入IE开发的系统.也就是说,想要在Chrome中创建链接跳转到IE浏览器指定页面,还要实现跳转动画效果.这个需求我们先来解决从Chrome跳转到IE的问题. 问题分析:从Chrome中跳转到IE,直接以http链接形式是不可能跳转到IE的,只能通过单独开发的本地程序打开IE,问题是如何让Chrome打开该程序.有一种方法可以实现:通过注册私有协议,用户点击链接的时候直接使用私有协

window.location.href("url") 无法在chrome和Firefoxz中使用

今天在js代码中加了一句window.location.href(‘url’)希望实现页面的跳转,IE中可以正常使用,但是Firefox却提示window.location is not a function. google以后将代码改为window.location='url' 程序正常执行. 简言之: 下面的格式可以在IE中正常执行,但是不能在Firefox和Chrome中执行: window.location.href("http://stackoverflow.com"); 下

scroll事件在IE,chrome,FF中的行为表现

周末想做一个滚动加载图片的效果.在IE,chrome,FF中验证时,忽然发现了一个有趣的问题. 问题是这样的: 1.     我发现鼠标滚动一次,scroll事件的处理函数执行的次数不一样. 2.     滚动的距离也不一样. 3.     点击滚动条滚动时,执行次数,滚动距离也不一样. 经过验证:        执行次数: 在IE5,6,7,8下,滚动一次,函数执行4次: 在IE9,10以上版本执行1次: 在chrome下,只执行一次.(chrome版本号:34.0.1847.116 m) 在

mac中apache开启https功能,本地发布安装app

mac中apache开启https功能,本地发布安装app 最近app进入收尾阶段,发包比较频繁.很多手机都不在测试证书中,所以使用的是企业证书打包. 每次上传到外网服务器都很慢,需要15分钟左右.想想还是自己本地mac做个服务器下载比较快一点. 所以学了下apache开启https的内容,本文记录了自己的学习过程. 1-先制作自己的签名证书 在前面的apache相关中,已经在mac上开启了apache,为了后面手机安装证书方便,我是在 /Library/WebServer/Documents/