✨Chrome DevTools 使用指☞北 - Chrome 外观设置 🔔

Anita_Sun
118 阅读1分钟

Hello，小伙伴们，大家好呀，在这边文章中，咱们会介绍如何对 Chrome 浏览器的开发者工具（DevTools）进行外观设置，以提升用户体验和开发效率，让咱们一起开始吧 😘😘

深色主题 🌈

在设置界面设置 🐾

  • 打开设置面板

    image.png

  • 在偏好设置的 tab 页中，选择你想要的主题

    image.png

  • 更新成功

    image.png

使用命令菜单设置 🐾

  • 按下 ctrl + shift + P，打开命令菜单

    image.png

  • 开始输入 dark，选择 切换到深色主题 命令，然后按 Enter 键以运行该命令（要在语言环境为英语的条件下，输入 dark 才可以查到）

    image.png

  • 更新成功

    image.png

抽屉式导航栏 🌈

  • 按 Esc 可打开或关闭抽屉式导航栏

    image.png

  • 点击 更多工具 以打开其他 抽屉式导航栏 标签页。

    image.png

    image.png

更改开发者工具位置 🌈

点击设置进行更改 🐾

  • 点击：按钮

    image.png

    • 从基座上取下。 从基座上取下单独的窗口

    • 固定到左侧 固定到左侧

    • 固定到底部。 固定到底部

    • 固定到右侧。 固定到右侧

    image.png

命令菜单 🐾

  • 按下 ctrl + shift + P，打开命令菜单

    image.png

  • 开始输入 dock，从上到下依次是 “停靠至底部” “左侧” “右侧” “取消停靠” “恢复上一个停靠位置”

    image.png

对面板、标签页和窗格重新排序 🌈

  • 标签页可以左右移动

    image.png

  • 上下移动标签页

    image.png

    image.png

面板布局 🌈

  • 开发者工具会根据窗口大小自动重新排列面板布局，可以在 设置 > Panel layout 中更新面板布局
  • 例如：

    • vertical（垂直）

      image.png

    • horizontal（水平）

      image.png

    • auto（自动根据窗口大小调整面板布局）

      image.png

      image.png

更改开发者工具界面语言 🌈

  • 点击设置，在 Language 中进行设置

    image.png

    image.png

avatar
文章
阅读
粉丝