飞跃高山与大洋的鱼飞跃高山与大洋的鱼
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
首页
先看
计算机
  • 数学
  • Linux
  • Arch
  • Manjaro
  • Ubuntu
  • CentOS
  • Kubernetes
  • Web
  • JavaScript
  • TypeScript
  • CSS
  • Canvas
  • Vue
  • Vite
  • NuxtJS
  • Webpack
  • Flutter
  • D3
  • Jest
  • WeApp
  • Utils
  • Nodejs
  • Nestjs
  • Golang
  • Nginx
  • Traefik
  • MySQL
  • MongoDB
  • Redis
  • Docker
算法
  • 像素风
  • Git
  • Github
  • VSCode
  • Chrome
  • Google
  • Bookmark scripts
  • 导航 🎉
  • VuePress 侧边栏插件
  • VuePress 官网
🚇 开往
  • CHROME

    • 认识 Chrome
    • Chrome 直接编辑文件
      • 添加工作区
      • 编辑内容
      • 更多编辑

Chrome 直接编辑文件

在做一些简单编写时可以尝试直接通过浏览器修改本地代码文件,例如修改样式后,本地同时变更,所见即所得。

添加工作区

首先在启动的页面按下 F12 或(Ctrl + Shift + i)即可打开开发者工具。

将当前的开发者工具切换到 Sources 下,再将子内容切换至 Filesystem,点击提示 Add folder to workspaces 添加当前页面的项目(文件)目录。

编辑内容

将内容添加至工作区后,可以观察到当前页面关联的文件右下角会有一个小绿点。

切换回 Element 标签,审查一个关联了 CSS 的元素,可以看到元素使用的 class 样式来源的文件右下角有一个的小绿点,表示该部分内容已关联。

修改内容:

color: red;
/* 修改为 */
color: mediumpurple;

可以观察到浏览器的样式已经修改,回到编辑器检查,发现编辑器的内容也已经被修改了。

更多编辑

在上一步演示了如何修改 CSS 的样式,但是修改 HTML 和 JavaScript 就不是那么容易的事情了。

首先要了解一个概念,DOM Tree 不等价于 HTML。当我们编辑 Element 中的内容修改的是渲染后的结果,其结果受多种因素影响,往往无法确认该修改哪一步,所以浏览器也无从处理。

当然编辑还是可以编辑的,回到 Sources 标签,点击对应的文件,直接进行修改,回到编辑器后就可以发现修改生效了,当拥有双屏的时候这种操作效率更低。

JavaScript 同理,当然在 Element 和 Sources 之间切换也是比较麻烦的事情,所以可以在 Element 标签页按下 Ctrl + Shift + p 接着输入 qs(quick source) 来同时查看两部分内容,更便于修改。

编辑文档!
上次更新:
贡献者: shanyuhai123
Prev
认识 Chrome