Skip to content

Gỡ lỗi trong Chrome #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tienanh088 wants to merge 4 commits into from
Closed

Gỡ lỗi trong Chrome #71

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2472170
article.md
tienanh088 Apr 1, 2020
ea5469b
Update article.md
tienanh088 Apr 1, 2020
410fc13
Update article.md
tienanh088 Apr 1, 2020
e38f91e
Update article.md
tienanh088 May 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions 1-js/03-code-quality/01-debugging-chrome/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
# Debugging in Chrome
# Gỡ lỗi trong Chrome

Before writing more complex code, let's talk about debugging.
Trước khi viết mã phức tạp hơn, hãy nói về gỡ lỗi.

[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.
[Gỡ lỗi](https://en.wikipedia.org/wiki/Debugging) là quá trình tìm và sửa lỗi trong tập lệnh. Tất cả các trình duyệt hiện đại và hầu hết các môi trường khác đều hỗ trợ các công cụ gỡ lỗi -- một giao diện người dùng đặc biệt trong các công cụ dành cho nhà phát triển giúp việc gỡ lỗi dễ dàng hơn nhiều. Nó cũng cho phép theo dõi mã từng bước để xem chính xác những gì đang xảy ra.

We'll be using Chrome here, because it has enough features, most other browsers have a similar process`.
Chúng tôi sẽ sử dụng Chrome tại đây, vì nó có đủ tính năng, hầu hết các trình duyệt khác cũng có quy trình tương tự.

## The "Sources" panel
## Bảng "Sources"

Your Chrome version may look a little bit different, but it still should be obvious what's there.
Phiên bản Chrome của bạn có thể trông hơi khác một chút, nhưng vẫn rõ ràng những gì ở đó.

- Open the [example page](debugging/index.html) in Chrome.
- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`).
- Select the `Sources` panel.
- Mở [trang ví dụ](debugging/index.html) trong Chrome.
- Bật công cụ dành cho nhà phát triển với `key:F12` (Mac: `key:Cmd+Opt+I`).
- Chọn bảng `Sources`.

Here's what you should see if you are doing it for the first time:
Đây là những gì bạn sẽ thấy nếu bạn đang làm nó lần đầu tiên:

![](chrome-open-sources.svg)

The toggler button <span class="devtools" style="background-position:-168px -76px"></span> opens the tab with files.
Nút chuyển đổi <span class="devtools" style="background-position:-168px -76px"></span> mở tab với các tệp.

Let's click it and select `hello.js` in the tree view. Here's what should show up:
Hãy nhấp vào nó và chọn `hello.js` trong chế độ xem dạng cây. Đây là những gì sẽ hiển thị:

![](chrome-tabs.svg)

Here we can see three zones:
Ở đây chúng ta có thể thấy ba khu vực:

1. The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
2. The **Source zone** shows the source code.
3. The **Information and control zone** is for debugging, we'll explore it soon.
1. **Resources zone** liệt kê HTML, JavaScript, CSS và các tệp khác, bao gồm các hình ảnh được đính kèm vào trang. Tiện ích mở rộng Chrome cũng có thể xuất hiện ở đây.
2. **Source zone** hiển thị mã nguồn.
3. **Information and control zone** là để gỡ lỗi, chúng ta sẽ sớm khám phá nó.

Now you could click the same toggler <span class="devtools" style="background-position:-200px -76px"></span> again to hide the resources list and give the code some space.
Bây giờ bạn có thể nhấp vào cùng một nút chuyển đổi <span class="devtools" style="background-position:-200px -76px"></span> một lần nữa để ẩn danh sách tài nguyên và cung cấp cho mã một số khoảng trống.

## Console

Expand Down