📌  相关文章
📜  atom web 预览 (1)

📅  最后修改于: 2023-12-03 14:59:24.988000             🧑  作者: Mango

Atom Web 预览

概述

Atom Web 预览是 Atom 编辑器中的一个插件，它可以让程序员在浏览器中轻松查看和调试 HTML、CSS 和 JavaScript 代码。

特性
  • 快速预览：可以在 Atom 编辑器中使用快捷键 Ctrl+Shift+H 或右击代码后选择“Atom Web 预览”来快速打开浏览器进行预览。
  • 自动更新：当你修改了代码后，Atom Web 预览会自动更新预览页面，方便调试。
  • 多浏览器预览：可以在设置中选择默认浏览器，也可以通过配置文件来添加预览时要使用的浏览器。
  • 多设备预览：可以在设置中选择使用的分辨率，也可以通过配置文件来添加分辨率和设备类型。
安装
  1. 打开 Atom 编辑器
  2. 点击菜单栏的“Edit” - “Preferences” - “Install”
  3. 在搜索框中输入“atom-web-preview”并按 Enter 键
  4. 安装插件并重启 Atom 编辑器
使用
  1. 打开 Atom 编辑器并打开一个 HTML 文件
  2. 使用快捷键 Ctrl+Shift+H 或右击代码后选择“Atom Web 预览”来打开浏览器预览

注意： 如果在预览中修改了代码，需要手动刷新预览页面才能看到修改后的效果。

示例
<!DOCTYPE html>
<html>
  <head>
    <title>Atom Web 预览</title>
    <style>
      body {
        background-color: #f0f0f0;
      }
      h1 {
        color: #333;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Hello, Atom Web 预览!</h1>
  </body>
</html>

预览效果：

预览效果