blob: 2bdaa30074e64e0cd66994b049c3485ddca2f715 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
---
title: 页面查看器
slug: Tools/Page_Inspector
translation_of: Tools/Page_Inspector
---
<div>{{ToolsSidebar}}</div>
<p>使用页面查看器来查看和修改页面的HTML和CSS。</p>
<p>您可以查看Firefox加载到本地的页面副本或在Firefox OS设备、Android版Firefox上的远端实例。查看<a href="/zh-CN/docs/Tools/Remote_Debugging">远程调试</a>学习如何使用开发者工具连接到远端Firefox实例。Firefox等远程目标操作系统Android设备或Firefox。</p>
<hr>
<h2 id="用户界面导览">用户界面导览</h2>
<p>为了对查看器有大概的了解，这里准备了一个<a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour">UI的快速导览</a>。</p>
<p>Firefox 62以上的版本应许用户把规则视图分成自己的版面。这被称为<a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">三版面模式</a>。</p>
<hr>
<h2 id="用法">用法</h2>
<p>查看器能做什么，请看以下指南：</p>
<div class="twocolumns">
<ul>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">打开查看器</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">查看和编辑HTML</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">检查和编辑盒模型</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">查看并选择颜色</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_fonts">查看字体</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Visualize_transforms">可视化转换</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">使用查看器 API</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择一个元素</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">查看和编辑CSS</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">查看事件监听器</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Work_with_animations">处理动画</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit CSS shapes</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/View_background_images">查看背景图片</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">从 Web 控制台使用查看器</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">检查Flexbox布局</a></li>
</ul>
</div>
<hr>
<h2 id="参考">参考</h2>
<div class="twocolumns">
<ul>
<li><a href="/zh-CN/docs/Tools/Page_Inspector/Keyboard_shortcuts">快捷键</a></li>
<li><a href="/zh-CN/docs/Tools/Tools_Toolbox#Inspector">设置</a></li>
</ul>
</div>
|
