- Chrome 开发者工具 for Designer（外部分享版）
- Chrome DevTools
- 如何开启
- 主要功能面板
- 工具布局
- 「元素」是设计师使用最频繁的界面
- 改变窗口停靠位置
- HTML 常用功能
- HTML、CSS、JS 是什么
- DOM 是什么
- 定位 DOM 元素
- H 隐藏 DOM 元素
- 复制 SVG 到设计软件
- 复制 DOM 元素
- 删除 DOM
- 搜索 DOM
- 移动 DOM
- 滚动到视野范围内
- 修改 DOM 中的文本
- 屏幕截图
- CSS 常用功能
- 基础数值操作
- 控件状态切换
- 可视化布局
- Grid 布局
- Flex 布局
- 切换主题
- 查看网站样式变量
- Font family 字体设置
- 查看实际渲染字体
- 文本颜色可访问性对比度指示器
- 阴影编辑器
- CSS 更改纪录
- 动画
- transition 过渡
Chrome 开发者工具 for Designer（外部分享版）
Chrome 开发者工具 for Designer（外部分享版）
2024年4月7日创建
5221
7307
本文讨论了Chrome开发者工具for Designer（外部分享版）的相关内容，包括开启方式、主要功能面板、工具布局、HTML和CSS常用功能、移动端/响应式操作、JS代码片段、偏好设置等。关键要点包括：
1.
开启方式：有三种开启方式，分别是网页右键菜单选「检查」、浏览器工具栏「更多工具」-「开发者工具」、快捷键option + command + i。
2.
主要功能面板：涵盖Elements、Console、Sources、Network等多个面板，各有其特定功能，如Elements可查看和编辑页面元素，Console记录页面执行信息等。
3.
工具布局：开启后一般停靠在网页右边，由顶部Tab大分类和多级面板构成，「元素」界面是设计师常用的。
4.
HTML常用功能：包括定位、隐藏、复制、删除DOM元素，搜索、移动DOM，修改文本，以及多种截图方式。
5.
CSS常用功能：涉及基础数值操作、控件状态切换、可视化布局、切换主题、查看样式变量等。
6.
移动端/响应式：可切换到设备工具栏，查看媒体查询断点、切换不同设备、进行自适应调节等。
7.
其他功能：如设计模式、debugger模式、偏好设置、网络节流设置、重新加载、穿透模式等。
如果你是对设计感兴趣的前端或产品；
如果你是对开发感兴趣的设计；
加入👉右边这个飞书群，大家平时互相交流想法和分享资讯。
附件不支持打印