Update article.md

Author: ImVietnam

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -6,7 +6,7 @@ Trước khi viết mã phức tạp hơn, hãy nói về gỡ lỗi.
 
 Chúng ta sẽ sử dụng Chrome ở đây, vì nó có đủ tính năng, hầu hết các trình duyệt khác đều có quy trình tương tự.
 
-## Bảng "Nguồn"
+## Bảng "Sources"
 
 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 phải rõ ràng có gì ở đó.
 
@@ -23,17 +23,17 @@ Hãy nhấp vào nó và chọn `hello.js` trong chế độ xem dạng cây. Đ
 
 ![](chrome-tabs.svg)
 
-Bảng Nguồn có 3 phần:
+Bảng Sources có 3 phần:
 
 1. Ngăn **File Navigator** liệt kê HTML, JavaScript, CSS và các tệp khác, bao gồm cả hình ảnh được đính kèm vào trang. Tiện ích mở rộng của Chrome cũng có thể xuất hiện ở đây.
-2. Khung **Code editor** hiển thị mã nguồn.
+2. Khung **Code Editor** hiển thị mã nguồn.
 3. Khung **JavaScript Debugging** dùng để gỡ lỗi, chúng ta sẽ sớm khám phá nó.
 
-Giờ đây, bạn có thể nhấp lại vào cùng một công cụ chuyển đổi <span class="devtools" style="background-position:-172px -122px"></span> để ẩn danh sách tài nguyên và tạo khoảng trống cho mã.
+Giờ đây, bạn có thể nhấp lại vào nút chuyển đổi <span class="devtools" style="background-position:-172px -122px"></span> để ẩn danh sách tài nguyên và tạo thêm không gian cho mã.
 
 ## Bảng điều khiển
 
-Nếu chúng ta nhấn `key:Esc`, thì bảng điều khiển sẽ mở ra bên dưới. Chúng ta có thể gõ lệnh ở đó và nhấn `key:Enter` để thực thi.
+Nếu chúng ta nhấn `key:Esc`, thì bảng điều khiển(console) sẽ mở ra bên dưới. Chúng ta có thể gõ lệnh ở đó và nhấn `key:Enter` để thực thi.
 
 Sau khi một câu lệnh được thực thi, kết quả của nó được hiển thị bên dưới.
 
@@ -45,7 +45,7 @@ Ví dụ: ở đây `1+2` cho kết quả là `3` và `hello("debugger")` không
 
 Hãy kiểm tra những gì đang diễn ra trong mã của [trang ví dụ](debugging/index.html). Trong `hello.js`, nhấp vào dòng số `4`. Vâng, ngay trên chữ số `4`, không phải trên mã.
 
-Chúc mừng! Bạn đã đặt một điểm dừng. Vui lòng nhấp vào số cho dòng `8`.
+Chúc mừng! Bạn đã đặt một điểm dừng(breakpoint). Vui lòng nhấp vào số cho dòng `8`.
 
 Nó sẽ trông như thế này (màu xanh là nơi bạn nên nhấp vào):
 
@@ -55,19 +55,19 @@ Nó sẽ trông như thế này (màu xanh là nơi bạn nên nhấp vào):
 
 Trong khi mã bị tạm dừng, chúng ta có thể kiểm tra các biến hiện tại, thực thi các lệnh trong bảng điều khiển, v.v. Nói cách khác, chúng ta có thể gỡ lỗi mã.
 
-Chúng ta luôn có thể tìm thấy danh sách các điểm ngắt trong bảng bên phải. Điều đó hữu ích khi chúng ta có nhiều điểm ngắt trong các tệp khác nhau. Nó cho phép chúng ta:
+Chúng ta luôn có thể tìm thấy danh sách các điểm dừng trong bảng bên phải. Điều đó hữu ích khi chúng ta có nhiều điểm ngắt trong các tệp khác nhau. Nó cho phép chúng ta:
 - Nhanh chóng chuyển đến điểm dừng trong mã (bằng cách nhấp vào nó trong bảng bên phải).
 - Tạm thời vô hiệu hóa breakpoint bằng cách bỏ chọn nó.
 - Loại bỏ breakpoint bằng cách click chuột phải chọn Remove.
-- ...Và như thế.
+- ...Vân vân.
 
 ```smart header="Điểm dừng có điều kiện"
-*Nhấp chuột phải* vào số dòng cho phép tạo điểm ngắt *có điều kiện*. Nó chỉ kích hoạt khi biểu thức đã cho là trung thực.
+*Nhấp chuột phải* vào số dòng cho phép tạo điểm ngắt *có điều kiện*. Nó chỉ kích hoạt khi biểu thức đã cho là đúng đắn.
 
-Điều đó rất hữu ích khi chúng ta chỉ cần dừng đối với một giá trị biến nhất định hoặc đối với các tham số chức năng nhất định.
+Điều đó rất hữu ích khi chúng ta chỉ cần dừng đối với một giá trị biến nhất định hoặc đối với các tham số nhất định.
 ```
 
-## lệnh gỡ lỗi
+## Lệnh gỡ lỗi
 
 Chúng ta cũng có thể tạm dừng mã bằng cách sử dụng lệnh `debugger` trong đó, như sau:
 
@@ -101,7 +101,7 @@ Vui lòng mở menu thả xuống thông tin ở bên phải (được đánh d
 
 2. **`Ngăn xếp cuộc gọi` -- hiển thị chuỗi cuộc gọi lồng nhau.**
 
-     Tại thời điểm hiện tại, trình gỡ lỗi nằm trong lệnh gọi `hello()`, được gọi bởi một tập lệnh trong `index.html` (không có chức năng nào ở đó, vì vậy nó được gọi là "ẩn danh").
+     Tại thời điểm hiện tại, trình gỡ lỗi nằm trong lệnh gọi `hello()`, được gọi bởi một tập lệnh trong `index.html` (không có hàm nào ở đó, vì vậy nó được gọi là "ẩn danh").
 
      Nếu bạn nhấp vào một mục trong ngăn xếp (ví dụ: "ẩn danh"), trình gỡ lỗi sẽ chuyển đến mã tương ứng và tất cả các biến của nó cũng có thể được kiểm tra.
 3. **`Phạm vi` -- biến hiện tại.**
@@ -110,11 +110,11 @@ Vui lòng mở menu thả xuống thông tin ở bên phải (được đánh d
 
      `Global` có các biến toàn cục (ngoài bất kỳ hàm nào).
 
-     Ngoài ra còn có từ khóa `this` mà chúng tôi chưa nghiên cứu, nhưng chúng tôi sẽ làm điều đó sớm thôi.
+     Ngoài ra còn có từ khóa `this` mà chúng ta chưa nghiên cứu, nhưng chúng ta sẽ làm điều đó sớm thôi.
 
 ## Theo dõi việc thực hiện
 
-Bây giờ là lúc *theo dõi* kịch bản.
+Bây giờ là lúc *theo dõi* tập lệnh.
 
 Có các nút cho nó ở trên cùng của bảng điều khiển bên phải. Hãy bấm vào nó.
 <!-- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg -->
@@ -125,40 +125,40 @@ Có các nút cho nó ở trên cùng của bảng điều khiển bên phải.
 
     ![](chrome-sources-debugger-trace-1.svg)
 
-    Quá trình thực thi đã tiếp tục, đạt đến một điểm ngắt khác bên trong `say()` và tạm dừng ở đó. Hãy xem "Call Stack" ở bên phải. Nó đã tăng thêm một cuộc gọi nữa. Bây giờ chúng ta đang ở trong `say()`.
+    Quá trình thực thi đã tiếp tục, đạt đến một điểm dừng khác bên trong `say()` và tạm dừng ở đó. Hãy xem "Call Stack" ở bên phải. Nó đã tăng thêm một cuộc gọi nữa. Bây giờ chúng ta đang ở trong `say()`.
 
-<span class="devtools" style="background-position:-200px -190px"></span> -- "Bước": chạy lệnh tiếp theo, phím nóng `key:F9`.
+<span class="devtools" style="background-position:-200px -190px"></span> -- "Step": chạy lệnh tiếp theo, phím nóng `key:F9`.
 : Chạy câu lệnh tiếp theo. Nếu chúng ta nhấp vào nó ngay bây giờ, `alert` sẽ được hiển thị.
 
      Nhấp đi bấm lại vào đây sẽ lần lượt duyệt qua tất cả các câu lệnh trong tập lệnh.
 
-<span class="devtools" style="background-position:-62px -192px"></span> -- "Bước qua": chạy lệnh tiếp theo, nhưng *không đi vào hàm*, phím nóng `key :F10`.
-: Tương tự như lệnh "Bước" trước đó, nhưng hoạt động khác nếu câu lệnh tiếp theo là lệnh gọi hàm. Đó là: không phải là chức năng tích hợp sẵn, như `alert`, mà là một chức năng của riêng chúng tôi.
+<span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": chạy lệnh tiếp theo, nhưng *không đi vào hàm*, phím nóng `key :F10`.
+: Tương tự như lệnh "Step" trước đó, nhưng hoạt động khác nếu câu lệnh tiếp theo là lệnh gọi hàm. Đó là: không phải là hàm tích hợp sẵn, như `alert`, mà là một hàm của riêng chúng ta.
 
-     Lệnh "Bước" đi vào nó và tạm dừng thực thi ở dòng đầu tiên, trong khi "Bước qua" thực hiện lời gọi hàm lồng nhau một cách vô hình, bỏ qua các phần bên trong hàm.
+     Lệnh "Step" đi vào nó và tạm dừng thực thi ở dòng đầu tiên, trong khi "Step over" thực hiện lời gọi hàm lồng nhau một cách vô hình, bỏ qua các phần bên trong hàm.
 
-     Việc thực thi sau đó bị tạm dừng ngay sau chức năng đó.
+     Việc thực thi sau đó bị tạm dừng ngay sau hàm đó.
 
      Điều đó tốt nếu chúng ta không quan tâm đến việc xem điều gì xảy ra bên trong lời gọi hàm.
 
-<span class="devtools" style="background-position:-4px -194px"></span> -- "Bước vào", phím nóng `key:F11`.
-: Điều đó tương tự như "Bước", nhưng hoạt động khác trong trường hợp gọi hàm không đồng bộ. Nếu bạn chỉ mới bắt đầu học JavaScript, thì bạn có thể bỏ qua sự khác biệt, vì chúng tôi chưa có cuộc gọi không đồng bộ.
+<span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", phím nóng `key:F11`.
+: Điều đó tương tự như "Step", nhưng hoạt động khác trong trường hợp gọi hàm không đồng bộ. Nếu bạn chỉ mới bắt đầu học JavaScript, thì bạn có thể bỏ qua sự khác biệt, vì chúng ta chưa có cuộc gọi không đồng bộ.
 
-     Trong tương lai, chỉ cần lưu ý rằng lệnh "Bước" bỏ qua các hành động không đồng bộ, chẳng hạn như `setTimeout` (gọi hàm theo lịch trình), thực thi sau. "Bước vào" đi vào mã của họ, đợi họ nếu cần. Xem [Hướng dẫn sử dụng DevTools](https://developers.google.com/web/updates/2018/01/devtools#async) để biết thêm chi tiết.
+     Trong tương lai, chỉ cần lưu ý rằng lệnh "Step" bỏ qua các hành động không đồng bộ, chẳng hạn như `setTimeout` (gọi hàm theo lịch trình), thực thi sau. "Bước vào" đi vào mã của hàm, đợi hàm nếu cần. Xem [Hướng dẫn sử dụng DevTools](https://developers.google.com/web/updates/2018/01/devtools#async) để biết thêm chi tiết.
 
-<span class="devtools" style="background-position:-32px -194px"></span> -- "Bước ra": tiếp tục thực thi cho đến khi kết thúc chức năng hiện tại, phím nóng `key:Shift+F11` .
-: Tiếp tục thực thi và dừng nó ở dòng cuối cùng của hàm hiện tại. Điều đó rất hữu ích khi chúng tôi vô tình tham gia một cuộc gọi lồng nhau bằng cách sử dụng <span class="devtools" style="background-position:-200px -190px"></span>, nhưng nó không khiến chúng tôi quan tâm và chúng tôi muốn tiếp tục đến cuối cuộc gọi đó sớm nhất có thể.
+<span class="devtools" style="background-position:-32px -194px"></span> -- "Step out": tiếp tục thực thi cho đến khi kết thúc hàm hiện tại, phím nóng `key:Shift+F11` .
+: Tiếp tục thực thi và dừng nó ở dòng cuối cùng của hàm hiện tại. Điều đó rất hữu ích khi chúng ta vô tình tham gia một cuộc gọi lồng nhau bằng cách sử dụng <span class="devtools" style="background-position:-200px -190px"></span>, nhưng nó không khiến chúng ta quan tâm và chúng ta muốn tiếp tục đến cuối cuộc gọi đó sớm nhất có thể.
 
 <span class="devtools" style="background-position:-61px -74px"></span> -- bật/tắt tất cả các điểm dừng.
 : Nút đó không di chuyển việc thực hiện. Chỉ cần bật/tắt hàng loạt cho các điểm dừng.
 
 <span class="devtools" style="background-position:-90px -146px"></span> -- bật/tắt tự động tạm dừng trong trường hợp có lỗi.
 : Khi được bật và các công cụ dành cho nhà phát triển đang mở, lỗi tập lệnh sẽ tự động tạm dừng quá trình thực thi. Sau đó, chúng ta có thể phân tích các biến để xem điều gì đã xảy ra. Vì vậy, nếu tập lệnh của chúng ta chết do lỗi, chúng ta có thể mở trình gỡ lỗi, bật tùy chọn này và tải lại trang để xem tập lệnh chết ở đâu và bối cảnh tại thời điểm đó là gì.
 
-```smart header="Tiếp tục đến đây"
+```smart header="Cntinue to here"
 Nhấp chuột phải vào một dòng mã sẽ mở menu ngữ cảnh với một tùy chọn tuyệt vời có tên "Tiếp tục đến đây".
 
-Điều đó rất hữu ích khi chúng tôi muốn di chuyển nhiều bước về phía trước dòng, nhưng chúng tôi quá lười để đặt điểm dừng.
+Điều đó rất hữu ích khi chúng ta muốn di chuyển nhiều bước về phía trước dòng, nhưng chúng ta quá lười để đặt điểm dừng.
 ```
 
 ## Ghi nhật ký
@@ -174,11 +174,11 @@ for (let i = 0; i < 5; i++) {
 }
 ```
 
-Người dùng thông thường không nhìn thấy đầu ra đó, nó nằm trong bảng điều khiển. Để xem bảng điều khiển, hãy mở bảng điều khiển của công cụ dành cho nhà phát triển hoặc nhấn `key:Esc` khi đang ở bảng điều khiển khác: mở bảng điều khiển ở dưới cùng.
+Người dùng thông thường không nhìn thấy đầu ra đó, nó nằm trong bảng điều khiển. Để xem nó, hãy mở bảng điều khiển của công cụ dành cho nhà phát triển hoặc nhấn `key:Esc` khi đang ở bảng điều khiển khác: mở bảng điều khiển ở dưới cùng.
 
-Nếu chúng tôi có đủ thông tin đăng nhập vào mã của mình thì chúng tôi có thể xem điều gì đang diễn ra từ các bản ghi mà không cần trình gỡ lỗi.
+Nếu chúng ta có đủ thông tin nhật ký bên trong mã của mình thì chúng ta có thể xem điều gì đang diễn ra từ các bản ghi mà không cần trình gỡ lỗi.
 
-## Bản tóm tắt
+## Tóm tắt
 
 Như chúng ta có thể thấy, có ba cách chính để tạm dừng tập lệnh:
 1. Một điểm dừng.