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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
|
---
title: Công cụ dành cho nhà phát triển của Firefox
slug: Tools
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>
<p class="summary">Firefox Developer Tools là một bộ công cụ dành cho nhà phát triển web được tích hợp trong Firefox. Bạn có thể sử dụng chúng để kiểm tra, chỉnh sửa và gỡ lỗi HTML, CSS, và JavaScript.</p>
<p>Phần này chứa các hướng dẫn chi tiết về tất cả các công cụ cũng như thông tin về cách gỡ lỗi Firefox dành cho Android, cách mở rộng DevTools và cách gỡ lỗi toàn bộ trình duyệt.</p>
<p>Nếu bạn có bất kỳ phản hồi nào về DevTools hoặc muốn đóng góp cho dự án, bạn có thể <a href="https://firefox-dev.tools/">tham gia cộng đồng DevTools</a>.</p>
<div class="note">
<p><strong>Lưu ý</strong>: Nếu bạn mới bắt đầu phát triển web và sử dụng các công cụ dành cho nhà phát triển, tài liệu <a href="/vi/docs/Learn">kiến thức</a> của chúng tôi sẽ giúp bạn — xem bài viết <a href="/en-US/docs/Learn/Getting_started_with_the_web">Bắt đầu với Web</a> và <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Công cụ dành cho nhà phát triển của trình duyệt là gì?</a> là điểm khởi đầu tốt.</p>
</div>
<h2 id="Các_công_cụ_cốt_lõi">Các công cụ cốt lõi</h2>
<p>Bạn có thể mở Firefox Developer Tools từ menu bằng cách chọn <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> hoặc sử dụng phím tắt <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> hoặc <kbd>F12</kbd> trên Windows và Linux, hoặc <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> trên macOS.</p>
<p>Menu dấu chấm lửng ở phía bên phải của Công cụ dành cho nhà phát triển chứa một số lệnh cho phép bạn thực hiện các hành động hoặc thay đổi cài đặt công cụ.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p>
<table class="standard-table" style="height: 178px; width: 840px;">
<tbody>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
<td>Nút này chỉ xuất hiện khi có nhiều iframe trên một trang. Nhấp vào nó để hiển thị danh sách các khung nội tuyến trên trang hiện tại và chọn khung mà bạn muốn làm việc.</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
<td>Nhấp vào nút này để chụp ảnh màn hình của trang hiện tại. (<strong>Lưu ý:</strong> Tính năng này không được bật theo mặc định và phải được bật trong cài đặt trước khi biểu tượng xuất hiện.)</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
<td>Chuyển sang Chế độ thiết kế tương thích.</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
<td>Mở menu bao gồm các tùy chọn gắn đế, khả năng hiển thị hoặc ẩn bảng điều khiển phân tách và cài đặt công cụ dành cho nhà phát triển. Menu cũng bao gồm các liên kết đến tài liệu cho Firefox Web Tools và cộng đồng Mozilla.</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
<td>Đóng công cụ dành cho nhà phát triển</td>
</tr>
</tbody>
</table>
<div class="column-container">
<div class="column-half">
<h3 id="Trang_Trình_kiểm_tra">Trang Trình kiểm tra</h3>
<p><a href="/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Xem và chỉnh sửa nội dung và bố cục trang. Hình dung nhiều khía cạnh của trang bao gồm mô hình hộp, hoạt ảnh và bố cục lưới.</p>
</div>
<div class="column-half">
<h3 id="Bảng_điều_khiển_Web">Bảng điều khiển Web</h3>
<p><a href="/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Xem thông báo được ghi lại bởi một trang web và tương tác với trang đó bằng JavaScript.</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="Trình_gỡ_lỗi_JavaScript">Trình gỡ lỗi JavaScript</h3>
<p><a href="/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Dừng, thực hiện từng bước, xem và chỉnh sửa JavaScript đang chạy trong một trang.</p>
</div>
<div class="column-half">
<h3 id="Giám_sát_mạng">Giám sát mạng</h3>
<p><a href="/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Xem các yêu cầu mạng được thực hiện khi một trang đang được tải.</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="Công_cụ_hiệu_suất">Công cụ hiệu suất</h3>
<p><a href="/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Phân tích hiệu suất đáp ứng, JavaScript và bố cục chung của trang web của bạn.</p>
</div>
<div class="column-half">
<h3 id="Chế_độ_thiết_kế_tương_thích">Chế độ thiết kế tương thích</h3>
<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Xem trang web hoặc ứng dụng của bạn sẽ trông như thế nào và hoạt động như thế nào trên các thiết bị và loại mạng khác nhau.</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="Trình_kiểm_tra_trợ_năng">Trình kiểm tra trợ năng</h3>
<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Cung cấp phương tiện để truy cập cây trợ năng của trang, cho phép bạn kiểm tra những gì còn thiếu hoặc cần chú ý.</p>
</div>
<div class="column-half">
<h3 id="Bảng_Ứng_dụng">Bảng Ứng dụng</h3>
<p><a href="/en-US/docs/Tools/Application"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/17307/just-application-panel.jpg" style="border: 1px solid black; display: block; height: 162px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>Cung cấp các công cụ để kiểm tra và gỡ lỗi các ứng dụng web hiện đại (còn được gọi là <a href="/en-US/docs/Web/Progressive_web_apps">Progressive Web Apps</a>). Điều này bao gồm việc kiểm tra <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> và <a href="/en-US/docs/Web/Manifest">bản kê khai ứng dụng web</a>.</p>
</div>
</div>
<div class="note">
<p><strong>Lưu ý</strong>: Thuật ngữ chung cho giao diện người dùng mà tất cả các Công cụ DevTools tồn tại là <a href="/en-US/docs/Tools/Tools_Toolbox">hộp công cụ</a>.</p>
</div>
<h2 id="Nhiều_công_cụ_hơn">Nhiều công cụ hơn</h2>
<p>Các công cụ dành cho nhà phát triển này cũng được tích hợp sẵn trong Firefox. Không giống như "công cụ cốt lõi ở trên" ở trên, bạn có thể không sử dụng chúng hàng ngày.</p>
<div class="twocolumns">
<dl>
<dt><a href="/en-US/docs/Tools/Memory">Bộ nhớ</a></dt>
<dd>Tìm ra những đối tượng nào đang sử dụng bộ nhớ.</dd>
<dt><a href="/en-US/docs/Tools/Storage_Inspector">Trình kiểm tra lưu trữ</a></dt>
<dd>Kiểm tra cookie, bộ nhớ cục bộ, indexedDB và bộ nhớ phiên có trong một trang.</dd>
<dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">Trình xem thuộc tính DOM</a></dt>
<dd>Kiểm tra các thuộc tính, chức năng DOM của trang, v.v.</dd>
<dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
<dd>Chọn một màu từ trang.</dd>
<dt><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></dt>
<dd>Xem và chỉnh sửa các kiểu CSS cho trang hiện tại.</dd>
<dt><a href="/en-US/docs/Tools/Screenshot_tool">Tạo ảnh chụp màn hình</a></dt>
<dd>Chụp ảnh màn hình của toàn bộ trang hoặc của một phần tử đơn lẻ.</dd>
<dt><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">Đo lường một phần của trang</a></dt>
<dd>Đo lường một khu vực cụ thể của một trang web.</dd>
<dt><a href="/en-US/docs/Tools/Rulers">Thước</a></dt>
<dd>Chồng các thước kẻ ngang và dọc trên một trang web</dd>
</dl>
</div>
<div class="column-container">
<div class="column-third">
<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
<p style="text-align: center;">Để có các công cụ và tính năng mới nhất dành cho nhà phát triển, hãy thử Firefox Developer Edition.</p>
<p><a href="https://www.mozilla.org/en-US/firefox/developer/">Tải xuống Firefox Developer Edition</a></p>
</div>
</div>
<h2 id="Kết_nối_các_công_cụ_dành_cho_nhà_phát_triển">Kết nối các công cụ dành cho nhà phát triển</h2>
<p>Nếu bạn mở các công cụ dành cho nhà phát triển bằng <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">phím tắt bàn phím</a> hoặc các mục menu tương đương, chúng sẽ nhắm mục tiêu tài liệu được lưu trữ bởi thẻ hiện đang hoạt động. Nhưng bạn cũng có thể đính kèm các công cụ vào nhiều mục tiêu khác, cả trong trình duyệt hiện tại và trong các trình duyệt khác nhau hoặc thậm chí các thiết bị khác nhau.</p>
<div class="twocolumns">
<dl>
<dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
<dd>Gỡ lỗi các tiện ích, nội dung thẻ và worker đang chạy trong trình duyệt.</dd>
<dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Kết nối với Firefox dành cho Android</a></dt>
<dd>Kết nối các công cụ dành cho nhà phát triển với một phiên bản Firefox chạy trên thiết bị Android.</dd>
<dt><a href="/en-US/docs/Tools/Working_with_iframes">Kết nối với iframe</a></dt>
<dd>Kết nối các công cụ dành cho nhà phát triển với một iframe cụ thể trong trang hiện tại.</dd>
<dt><a href="/en-US/docs/Tools/Valence">Kết nối với các trình duyệt khác</a></dt>
<dd>Kết nối các công cụ dành cho nhà phát triển với Chrome trên Android và Safari trên iOS.</dd>
</dl>
</div>
<h2 id="Gỡ_lỗi_trình_duyệt">Gỡ lỗi trình duyệt</h2>
<p>Theo mặc định, các công cụ dành cho nhà phát triển được đính kèm với một trang web hoặc ứng dụng web. Nhưng bạn cũng có thể kết nối chúng với toàn bộ trình duyệt. Điều này hữu ích cho việc phát triển trình duyệt và tiện ích.</p>
<div class="twocolumns">
<dl>
<dt><a href="/en-US/docs/Tools/Browser_Console">Bảng điều khiển trình duyệt</a></dt>
<dd>Xem các thông báo được ghi lại bởi chính trình duyệt và bởi các tiện ích, đồng thời chạy mã JavaScript trong phạm vi của trình duyệt.</dd>
<dt><a href="/en-US/docs/Tools/Browser_Toolbox">Hộp công cụ trình duyệt</a></dt>
<dd>Đính kèm công cụ dành cho nhà phát triển vào chính trình duyệt.</dd>
<dt></dt>
</dl>
</div>
<h2 id="Mở_rộng_DevTools">Mở rộng DevTools</h2>
<p>Để biết thông tin về cách mở rộng Firefox DevTools, hãy xem <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> trong phần <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a> của MDN.</p>
<h2 id="Di_chuyển_từ_Firebug">Di chuyển từ Firebug</h2>
<p>Firebug đã không còn được hỗ trợ (xem <a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug tồn tại trên Firefox DevTools</a> để biết chi tiết vì sao), và chúng tôi đánh giá cao rằng một số người sẽ thấy việc di chuyển sang một bộ DevTools khác ít quen thuộc hơn là một thách thức. Để dễ dàng chuyển đổi từ Firebug sang các công cụ dành cho nhà phát triển Firefox, chúng tôi đã viết một hướng dẫn hữu ích — <a href="/en-US/docs/Tools/Migrating_from_Firebug">Di chuyển từ Firebug</a>.</p>
<h2 id="Đóng_góp">Đóng góp</h2>
<p>Nếu bạn muốn giúp cải thiện các công cụ dành cho nhà phát triển, các tài nguyên này sẽ giúp bạn bắt đầu.</p>
<div class="twocolumns">
<dl>
<dt><a href="https://firefox-dev.tools/">Tham gia</a></dt>
<dd>Trang web cộng đồng của chúng tôi giải thích cách tham gia.</dd>
<dt><a href="http://bugs.firefox-dev.tools/">bugs.firefox-dev.tools</a></dt>
<dd>Một công cụ giúp tìm ra lỗi để giải quyết.</dd>
</dl>
</div>
|
