前端开发 调试工具 Chrome Workspace

最新推荐文章于 2024-08-23 11:30:00 发布
最新推荐文章于 2024-08-23 11:30:00 发布
阅读量1.4k 收藏
点赞数

1.在 chrome://flags/ 中启用 Developer Tools Experiments (开发者工具实验)

2.在 Developer tools 设置 Experiments 选项下开启File system folders in Sources Panel，再重启Developer tools，就会多出Workspace选项。

File-system-folders-in-Sources-Panel

3.Chrome为了确保安全，将目录添加到File systems时会要求在目录中存在.allow-devtools-edit文件，才允许开发者工具添加目录编辑保存文件，所以需要在资源目录中创建这个名字的空文件，方式有很多，例如：在资源目录中执行命令

Windows copy con .allow-devtools-edit 再 Ctrl + Z

cmd

Mac touch .allow-devtools-edit

4.在Workspace中把你的资源目录添加到File systems即可，如果CSS，JS链的是URL可以使用Mappings来设置路由（注意:结尾千万不要加上\，他逻辑只判断了是否以/结尾，否则就会变成path\/,略坑啊~~）

workspace

现在就可以在开发者工具中各种调试了，你就可以看到你的源文件也跟着改动啦~。

dev-edit

或者也可以在Sources中修改文件

sources

缺陷

无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑
总之Workspace还是能在调试阶段帮助我们提升效率

快乐无边
关注
Chrome调试工具进阶指南（一）
发果叁
03-13 1388
copy xpath 和copy full xpath 的区别就是前者为相对路径，后者为绝对路径。
vscode 切换开发者工具_VSCode插件开发全攻略（六）开发调试技巧
weixin_39569051的博客
12-19 1152
前言在介绍完一些比较简单的内容点之后，我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧，特别是后面一章节将要介绍WebView的知识，这个坑会比较多，避免大家走弯路。开发方式最理想的方式是准备双显示器，一个写代码，一个运行插件，实践证明这种方式开发效率会提升很多，每次修改完代码之后直接Ctrl+R重新加载即可，非常方便。日志查看就我目前遇到的情况来看，vscode日志主要有这5种：旧窗...
前端架构: 脚手架之包管理工具的案例对比及workspaces特性的使用与发布过程
Wang的专栏
02-28 1721
vue-cli 这个脚手架使用 Lerna 管理，它的项目显得非常清晰，在 vue-cli 中包含很多 package 点开进去，每一个包都有package.json，它里面有很多项目，再没有 Lerna 之前去维护和管理这么多包是会非常困难的，而 webpack 至今还没有用任何的包管理工具，在其 lib 下会有非常多的模块，而且它还自己写了很多脚本来进行管理各种功能
Chrome Workspace开发者调试工具
iteye_14984的博客
08-20 153
学习前端开发这么久了，在调试页面的时候会经常用到一些开发工具，个人喜欢用firebug。但今天小熊个人博客为大家说到的是Chrome里面的开发工具Workspace。 Workspace是？ Workspace允许开发着在Chrome调试工具中实时编辑源文件。系统会将磁盘文件匹配到你的本地服务器上，这样你可以通过Chrome的source panel保存修改的代码，或者当外部文件更新时立即刷新。...
开发者调试工具Chrome Workspace
JEECG官方博客
07-05 1682
Workspace是个什么样的东西呢？他能够在开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作，能够提高一定的效率。之前这样的功能需要在本地开启一个sever端的服务。例如 autosave（ https://github.com/NV/chrome-devtools-autosave），每次需要开启nodejs的sever端才
vue项目中使用workspaces
阿飞
12-29 3920
vue多个项目中不同模块互相引用 vue、yarn wrokspace、monorepo
Chrome Workspace 前端开发神器！ 亲测可用
jacky_zh的专栏
11-21 3483
一个小哥们推荐的，在网上根据几个帖子都没有配置成功。由于不能抓自己电脑的图，所以上原帖的图了。我没有使用第一步骤。 直接从第3步骤开始的。亲测可用。直接修改element的样式，自动修改源文件。这也太提升效率了。赞！ 开启”开发者工具实验”(这翻译真心烂…): 在browser输入chrome://flags/，启用”开发者工具实验”   重启chrome f12 打开
vscode.zip (前端开发工具)
07-08
尤其对于前端应用，VS Code可以通过Chrome调试工具直接与浏览器连接，实现无缝的前端调试体验。 此外，VS Code具有强大的代码导航和搜索功能，如Go to Definition（跳转到定义）、Find References（查找引用）以及...
使用MyEclipse进行前端开发与调试
它支持HTML、CSS、JavaScript等前端开发语言，提供了丰富的功能和工具，方便开发人员进行前端开发与调试。 ## 1.2 MyEclipse的安装步骤 以下是安装MyEclipse的步骤： 1. 访问MyEclipse官方网站，并下载适用于您...
Microsoft Dynamics 365软件二次开发：使用JavaScript和WebAPI进行前端定制
最新发布
kkchenjj的博客
08-23 628
在Microsoft Dynamics 365中，WebAPI是一个基于HTTP的RESTful API，它允许开发者使用任何能够发送HTTP请求的编程语言来访问和操作Dynamics 365中的数据。WebAPI提供了与组织服务相同的功能，但使用的是更现代的HTTP标准，这使得它在跨平台和跨语言的开发中更加灵活和强大。在Microsoft Dynamics 365中，Web资源是用于自定义用户界面的文件，如JavaScript、HTML、CSS和图像文件。
chrome插件--Rest client，接收POST, GET, PUT, DELETE请求
08-07
Rest client是用来调试REST风格的Web服务，接收POST, GET, PUT, DELETE请求。在chrome或者firefox浏览器都有很多插件。目前发现chrome浏览器的advanced rest client的功能比较强大。因此介绍一下使用插件的安装与使用。谷歌浏览器advance-rest-client插件安装， 包含所有文档Advanced-REST-client3.1.9 和 启动所需的 definitions.json
Linux 日常命令（前端开发）
晓强的技术博客
01-16 1828
All in all All in all Daily Commands Find ls find Create touch mkdir See grep diff awk Change sed cut Other date Daily Commands Find ls See what are the files in current d
最新 Chrome DevTools(v57) 使用详解
weixin_33863087的博客
12-21 2103
写在前面：Chrome DevTools 系列文章正在紧张地整理当中，目前正在整理 DevTools 的第一部分： Elements，大家可以关注 Chrome DevTools 来获得最新的信息，也可以关注整个项目front-end-study。 Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器...
Chrome Workspace
韦奕-web前端开发
08-07 1515
Workspace是个什么样的东西呢？他能够在开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作，能够提高一定的效率。 之前这样的功能需要在本地开启一个sever端的服务。例如 autosave（https://github.com/NV/chrome-devtools-autosave），每次需要开启nodejs的seve
转 通过 Chrome Workspace 调试本地项目
oYuLian的博客
04-20 688
通过 Chrome Workspace 调试本地项目 前端开发 / 2015-02-11 / 7 条评论 通过 Workspace，你可以把本地服务器的资源映射为硬盘上的文件，实现调试 JS 和 CSS 的同时自动保存文件，比如 Elements 面板中的样式变更会自动保存到文件中。 以调试本地服务器上的 Minty 主题为例： 打开 DevTools 开发者工具中
【转载】Advanced Rest Client安装教程
Mr.Cheng的博客
04-01 333
https://blog.csdn.net/ty_hf/article/details/51100863 Adavanced Rest下载地址：
vue.js 初体验— Chrome 插件开发实录
weixin_33860528的博客
05-12 242
欢迎大家关注腾讯云技术社区-博客园官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 作者：陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生，它把一些常见的动画效果都封装起来了，非常实用。但是有时候在开发中，仅仅只是需要某一两个动画效果，把整个CSS文件都引入，这样不是太好。 需求就出现了，能不能有一个工具可以直接预览Animate.cs...
前端工程化pnpm 管理workspace 统一版本号
木贝西的博客
03-11 1863
参考vue源码release const fs = require('fs') const path = require('path') const chalk = require('chalk') const args = require('minimist')(process.argv.slice(2)) const semver = require('semver') const currentVersion = require('../package.json').version const {
Linux：开发工具(常见编辑器）
赫菲斯托斯，，
05-12 1994
Linux下常见的几种编辑器： Vim Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。它具有代码补完、编译及错误跳转等方便编程的功能，在程序员中被广泛的被使用。 Vim和Emacs并列成为Linux系统用户最喜欢的编辑器 Brackets Brackets是由Adobe Systems为Linux开发者设计开发并在GitHub上发布的开源前端开...
Visual C++开发调试指南：工具与技巧
"Visual C++开发工具与调试技巧整理" 在Visual C++开发过程中，熟练掌握开发工具和调试技巧是至关重要的。以下是一些关键点的详细解释： 1. **在Release状态下进行调试**： 在Release模式下，通常是为了优化性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值