From 1532147d527ba4ed025e9760ea7accde21e87c13 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Tue, 21 Feb 2023 10:01:55 +0700 Subject: [PATCH 01/20] Update article.md --- .../01-debugging-chrome/article.md | 190 +++++++++--------- 1 file changed, 94 insertions(+), 96 deletions(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 8c52735bf..9b09e9e47 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,196 +1,194 @@ -# 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://vi.wikipedia.org/wiki/G%E1%BB%A1_l%E1%BB%97i) là quá trình tìm và sửa lỗi trong một 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 từng bước mã để xem chính xác điều gì đang diễn ra. -We'll be using Chrome here, because it has enough features, most other browsers have a similar process. +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ự. -## The "Sources" panel +## Bảng "Nguồn" -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 phải rõ ràng có 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 bằng `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 nên xem nếu bạn đang làm điều đó lần đầu tiên: ![](chrome-open-sources.svg) +Nút chuyển đổi mở tab có tệp. -The toggler button opens the tab with files. - -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) -The Sources panel has 3 parts: +Bảng Nguồn có 3 phần: -1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. -2. The **Code Editor** pane shows the source code. -3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon. +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. +3. Khung **JavaScript Debugging** dùng để gỡ lỗi, chúng ta sẽ sớm khám phá nó. -Now you could click the same toggler again to hide the resources list and give the code some space. +Giờ đây, bạn có thể nhấp lại vào cùng một công cụ chuyển đổi để ẩn danh sách tài nguyên và tạo khoảng trống cho mã. -## Console +## Bảng điều khiển -If we press `key:Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute. +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. -After a statement is executed, its result is shown below. +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. -For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`: +Ví dụ: ở đây `1+2` cho kết quả là `3` và `hello("debugger")` không trả về kết quả nào, vì vậy kết quả là `undefined`: ![](chrome-sources-console.svg) -## Breakpoints +## Điểm dừng -Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. +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ã. -Congratulations! You've set a breakpoint. Please also click on the number for line `8`. +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`. -It should look like this (blue is where you should click): +Nó sẽ trông như thế này (màu xanh là nơi bạn nên nhấp vào): ![](chrome-sources-breakpoint.svg) -A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. +*breakpoint* là một điểm mã nơi trình gỡ lỗi sẽ tự động tạm dừng thực thi JavaScript. -While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it. +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ã. -We can always find a list of breakpoints in the right panel. That's useful when we have many breakpoints in various files. It allows us to: -- Quickly jump to the breakpoint in the code (by clicking on it in the right panel). -- Temporarily disable the breakpoint by unchecking it. -- Remove the breakpoint by right-clicking and selecting Remove. -- ...And so on. +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: +- 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ế. -```smart header="Conditional breakpoints" -*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy. +```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. -That's handy when we need to stop only for a certain variable value or for certain function parameters. +Đ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. ``` -## Debugger command +## lệnh gỡ lỗi -We can also pause the code by using the `debugger` command in it, like this: +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: ```js function hello(name) { let phrase = `Hello, ${name}!`; *!* - debugger; // <-- the debugger stops here + debugger; // <-- trình gỡ lỗi dừng ở đây */!* say(phrase); } ``` -That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint. - +Điều đó rất thuận tiện khi chúng ta đang ở trong trình chỉnh sửa mã và không muốn chuyển sang trình duyệt và tra cứu tập lệnh trong các công cụ dành cho nhà phát triển để đặt điểm dừng. -## Pause and look around +## Tạm dừng và nhìn xung quanh -In our example, `hello()` is called during the page load, so the easiest way to activate the debugger (after we've set the breakpoints) is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac). +Trong ví dụ của chúng ta, `hello()` được gọi trong khi tải trang, vì vậy cách dễ nhất để kích hoạt trình gỡ lỗi (sau khi chúng ta đã đặt các điểm ngắt) là tải lại trang. Vì vậy, hãy nhấn `key:F5` (Windows, Linux) hoặc `key:Cmd+R` (Mac). -As the breakpoint is set, the execution pauses at the 4th line: +Khi điểm ngắt được đặt, quá trình thực thi tạm dừng ở dòng thứ 4: ![](chrome-sources-debugger-pause.svg) -Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state: +Vui lòng mở menu thả xuống thông tin ở bên phải (được đánh dấu bằng các mũi tên). Chúng cho phép bạn kiểm tra trạng thái mã hiện tại: -1. **`Watch` -- shows current values for any expressions.** +1. **`Xem` -- hiển thị các giá trị hiện tại cho bất kỳ biểu thức nào.** - You can click the plus `+` and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution. + Bạn có thể nhấp vào dấu cộng `+` và nhập một biểu thức. Trình gỡ lỗi sẽ hiển thị giá trị của nó bất kỳ lúc nào, tự động tính toán lại giá trị đó trong quá trình thực thi. -2. **`Call Stack` -- shows the nested calls chain.** +2. **`Ngăn xếp cuộc gọi` -- hiển thị chuỗi cuộc gọi lồng nhau.** - At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous"). + 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"). - If you click on a stack item (e.g. "anonymous"), the debugger jumps to the corresponding code, and all its variables can be examined as well. -3. **`Scope` -- current variables.** + 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.** - `Local` shows local function variables. You can also see their values highlighted right over the source. + `Cục bộ` hiển thị các biến hàm cục bộ. Bạn cũng có thể thấy các giá trị của chúng được đánh dấu ngay trên nguồn. - `Global` has global variables (out of any functions). + `Global` có các biến toàn cục (ngoài bất kỳ hàm nào). - There's also `this` keyword there that we didn't study yet, but we'll do that soon. + 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. -## Tracing the execution +## Theo dõi việc thực hiện -Now it's time to *trace* the script. +Bây giờ là lúc *theo dõi* kịch bản. -There are buttons for it at the top of the right panel. Let's engage them. +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ó. - -- "Resume": continue the execution, hotkey `key:F8`. -: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. + -- "Resume": tiếp tục thực hiện, phím nóng `key:F8`. +: Tiếp tục thực thi. Nếu không có điểm dừng bổ sung, thì quá trình thực thi sẽ tiếp tục và trình gỡ lỗi sẽ mất quyền kiểm soát. - Here's what we can see after a click on it: + Đây là những gì chúng ta có thể thấy sau khi nhấp vào nó: ![](chrome-sources-debugger-trace-1.svg) - The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call Stack" at the right. It has increased by one more call. We're inside `say()` now. + 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()`. - -- "Step": run the next command, hotkey `key:F9`. -: Run the next statement. If we click it now, `alert` will be shown. + -- "Bước": 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ị. - Clicking this again and again will step through all script statements one by one. + 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. - -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`. -: Similar to the previous "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own. + -- "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. - The "Step" command goes into it and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals. + 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. - The execution is then paused immediately after that function. + Việc thực thi sau đó bị tạm dừng ngay sau chức năng đó. - That's good if we're not interested to see what happens inside the function call. + Đ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. - -- "Step into", hotkey `key:F11`. -: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet. + -- "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ộ. - For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details. + 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. - -- "Step out": continue the execution till the end of the current function, hotkey `key:Shift+F11`. -: Continue the execution and stop it at the very last line of the current function. That's handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible. + -- "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 , 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ể. - -- enable/disable all breakpoints. -: That button does not move the execution. Just a mass on/off for breakpoints. + -- 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. - -- enable/disable automatic pause in case of an error. -: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. + -- 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="Continue to here" -Right click on a line of code opens the context menu with a great option called "Continue to here". +```smart header="Tiếp tục đến đây" +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". -That's handy when we want to move multiple steps forward to the line, but we're too lazy to set a breakpoint. +Đ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. ``` -## Logging +## Ghi nhật ký -To output something to console from our code, there's `console.log` function. +Để xuất nội dung nào đó ra bảng điều khiển từ mã của chúng ta, có chức năng `console.log`. -For instance, this outputs values from `0` to `4` to console: +Chẳng hạn, điều này xuất các giá trị từ `0` đến `4` sang bảng điều khiển: ```js run -// open console to see +// mở console để thấy for (let i = 0; i < 5; i++) { console.log("value,", i); } ``` -Regular users don't see that output, it is in the console. To see it, either open the Console panel of developer tools or press `key:Esc` while in another panel: that opens the console at the bottom. +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. -If we have enough logging in our code, then we can see what's going on from the records, without the debugger. +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. -## Summary +## Bản tóm tắt -As we can see, there are three main ways to pause a script: -1. A breakpoint. -2. The `debugger` statements. -3. An error (if dev tools are open and the button is "on"). +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. +2. Các câu lệnh `debugger`. +3. Lỗi (nếu công cụ dành cho nhà phát triển đang mở và nút đang "bật"). -When paused, we can debug - examine variables and trace the code to see where the execution goes wrong. +Khi tạm dừng, chúng tôi có thể gỡ lỗi - kiểm tra các biến và theo dõi mã để xem nơi thực thi sai. -There are many more options in developer tools than covered here. The full manual is at . +Có nhiều tùy chọn hơn trong các công cụ dành cho nhà phát triển ngoài những gì được đề cập ở đây. Hướng dẫn đầy đủ có tại . -The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools. +Thông tin từ chương này là đủ để bắt đầu gỡ lỗi, nhưng sau này, đặc biệt nếu bạn làm nhiều công việc trên trình duyệt, vui lòng vào đó và xem qua các khả năng nâng cao hơn của các công cụ dành cho nhà phát triển. -Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click and context menus! +Ồ, và bạn cũng có thể nhấp vào các vị trí khác nhau của công cụ dành cho nhà phát triển và chỉ cần xem những gì đang hiển thị. Đó có lẽ là con đường nhanh nhất để tìm hiểu các công cụ dành cho nhà phát triển. Đừng quên nhấp chuột phải và menu ngữ cảnh! From 09dc0b24fd1963cc2988fe9172b73a5a589a628c Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Tue, 21 Feb 2023 10:17:34 +0700 Subject: [PATCH 02/20] Update index.html --- .../01-debugging-chrome/debugging.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html index 6c651e854..97f460f5f 100644 --- a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html +++ b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html @@ -4,7 +4,7 @@ - An example for debugging. + Một ví dụ để gỡ lỗi. - An example for debugging. + Một ví dụ để gỡ lỗi. - + @@ -20,17 +20,17 @@ - + - +
- + From 7a4422c881f8de2fd0e09adc16684285c1c8b8dd Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:09:31 +0700 Subject: [PATCH 12/20] Update task.md --- .../05-testing-mocha/3-pow-test-wrong/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md index 66fece09a..2dfce33f7 100644 --- a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md +++ b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# What's wrong in the test? +# Có gì sai trong bài kiểm tra? -What's wrong in the test of `pow` below? +Có gì sai trong bài kiểm tra `pow` bên dưới? ```js it("Raises x to the power n", function() { @@ -21,4 +21,4 @@ it("Raises x to the power n", function() { }); ``` -P.S. Syntactically the test is correct and passes. +Tái bút. Về mặt cú pháp, bài kiểm tra là chính xác và vượt qua. From 60fa1246de43261c805b10ba927b145ab119f94e Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:10:54 +0700 Subject: [PATCH 13/20] Update solution.md --- .../3-pow-test-wrong/solution.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md index 4d0571b9d..a6cf9ab06 100644 --- a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md +++ b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md @@ -1,14 +1,14 @@ -The test demonstrates one of the temptations a developer meets when writing tests. +Bài kiểm tra thể hiện một trong những cám dỗ mà nhà phát triển gặp phải khi viết bài kiểm tra. -What we have here is actually 3 tests, but layed out as a single function with 3 asserts. +Những gì chúng ta có ở đây thực sự là 3 bài kiểm tra, nhưng được bố trí dưới dạng một chức năng duy nhất với 3 lần xác nhận. -Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong. +Đôi khi viết theo cách này dễ dàng hơn, nhưng nếu có lỗi xảy ra, thì sẽ khó nhận ra điều gì đã xảy ra. -If an error happens in the middle of a complex execution flow, then we'll have to figure out the data at that point. We'll actually have to *debug the test*. +Nếu xảy ra lỗi ở giữa quy trình thực thi phức tạp, thì chúng ta sẽ phải tìm ra dữ liệu tại thời điểm đó. Chúng ta thực sự sẽ phải *gỡ lỗi thử nghiệm*. -It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs. +Sẽ tốt hơn nhiều nếu chia bài kiểm tra thành nhiều khối `it` với đầu vào và đầu ra được viết rõ ràng. -Like this: +Như thế này: ```js describe("Raises x to power n", function() { it("5 in the power of 1 equals 5", function() { @@ -25,9 +25,9 @@ describe("Raises x to power n", function() { }); ``` -We replaced the single `it` with `describe` and a group of `it` blocks. Now if something fails we would see clearly what the data was. +Chúng ta đã thay thế một khối `it` bằng `describe` và một nhóm các khối `it`. Bây giờ nếu có gì đó không thành công, chúng ta sẽ thấy rõ ràng dữ liệu là gì. -Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`: +Ngoài ra, chúng ta có thể tách riêng một bài kiểm tra và chạy nó ở chế độ độc lập bằng cách viết `it.only` thay vì `it`: ```js From d59d902eb9349082a460ed0c90b637d3db4189a0 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:11:49 +0700 Subject: [PATCH 14/20] Delete solution.md --- .../3-pow-test-wrong/solution.md | 50 ------------------- 1 file changed, 50 deletions(-) delete mode 100644 1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md deleted file mode 100644 index a6cf9ab06..000000000 --- a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md +++ /dev/null @@ -1,50 +0,0 @@ -Bài kiểm tra thể hiện một trong những cám dỗ mà nhà phát triển gặp phải khi viết bài kiểm tra. - -Những gì chúng ta có ở đây thực sự là 3 bài kiểm tra, nhưng được bố trí dưới dạng một chức năng duy nhất với 3 lần xác nhận. - -Đôi khi viết theo cách này dễ dàng hơn, nhưng nếu có lỗi xảy ra, thì sẽ khó nhận ra điều gì đã xảy ra. - -Nếu xảy ra lỗi ở giữa quy trình thực thi phức tạp, thì chúng ta sẽ phải tìm ra dữ liệu tại thời điểm đó. Chúng ta thực sự sẽ phải *gỡ lỗi thử nghiệm*. - -Sẽ tốt hơn nhiều nếu chia bài kiểm tra thành nhiều khối `it` với đầu vào và đầu ra được viết rõ ràng. - -Như thế này: -```js -describe("Raises x to power n", function() { - it("5 in the power of 1 equals 5", function() { - assert.equal(pow(5, 1), 5); - }); - - it("5 in the power of 2 equals 25", function() { - assert.equal(pow(5, 2), 25); - }); - - it("5 in the power of 3 equals 125", function() { - assert.equal(pow(5, 3), 125); - }); -}); -``` - -Chúng ta đã thay thế một khối `it` bằng `describe` và một nhóm các khối `it`. Bây giờ nếu có gì đó không thành công, chúng ta sẽ thấy rõ ràng dữ liệu là gì. - -Ngoài ra, chúng ta có thể tách riêng một bài kiểm tra và chạy nó ở chế độ độc lập bằng cách viết `it.only` thay vì `it`: - - -```js -describe("Raises x to power n", function() { - it("5 in the power of 1 equals 5", function() { - assert.equal(pow(5, 1), 5); - }); - -*!* - // Mocha will run only this block - it.only("5 in the power of 2 equals 25", function() { - assert.equal(pow(5, 2), 25); - }); -*/!* - - it("5 in the power of 3 equals 125", function() { - assert.equal(pow(5, 3), 125); - }); -}); -``` From 05beb8d17bab575618f4d2634551db184399162c Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:14:16 +0700 Subject: [PATCH 15/20] Create solution.md --- .../3-pow-test-wrong/solution.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md new file mode 100644 index 000000000..4d0571b9d --- /dev/null +++ b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md @@ -0,0 +1,50 @@ +The test demonstrates one of the temptations a developer meets when writing tests. + +What we have here is actually 3 tests, but layed out as a single function with 3 asserts. + +Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong. + +If an error happens in the middle of a complex execution flow, then we'll have to figure out the data at that point. We'll actually have to *debug the test*. + +It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs. + +Like this: +```js +describe("Raises x to power n", function() { + it("5 in the power of 1 equals 5", function() { + assert.equal(pow(5, 1), 5); + }); + + it("5 in the power of 2 equals 25", function() { + assert.equal(pow(5, 2), 25); + }); + + it("5 in the power of 3 equals 125", function() { + assert.equal(pow(5, 3), 125); + }); +}); +``` + +We replaced the single `it` with `describe` and a group of `it` blocks. Now if something fails we would see clearly what the data was. + +Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`: + + +```js +describe("Raises x to power n", function() { + it("5 in the power of 1 equals 5", function() { + assert.equal(pow(5, 1), 5); + }); + +*!* + // Mocha will run only this block + it.only("5 in the power of 2 equals 25", function() { + assert.equal(pow(5, 2), 25); + }); +*/!* + + it("5 in the power of 3 equals 125", function() { + assert.equal(pow(5, 3), 125); + }); +}); +``` From e2bf37b4e3ec8762df919a4c598170f6b78893b6 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:15:13 +0700 Subject: [PATCH 16/20] Update task.md --- .../05-testing-mocha/3-pow-test-wrong/task.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md index 2dfce33f7..66fece09a 100644 --- a/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md +++ b/1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# Có gì sai trong bài kiểm tra? +# What's wrong in the test? -Có gì sai trong bài kiểm tra `pow` bên dưới? +What's wrong in the test of `pow` below? ```js it("Raises x to the power n", function() { @@ -21,4 +21,4 @@ it("Raises x to the power n", function() { }); ``` -Tái bút. Về mặt cú pháp, bài kiểm tra là chính xác và vượt qua. +P.S. Syntactically the test is correct and passes. From 671af26ac59304d42b4a2422ebf01a3831943bcf Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Thu, 23 Feb 2023 10:17:46 +0700 Subject: [PATCH 17/20] Update index.html --- .../05-testing-mocha/index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/1-js/03-code-quality/05-testing-mocha/index.html b/1-js/03-code-quality/05-testing-mocha/index.html index 01305bc83..28a2ea62b 100644 --- a/1-js/03-code-quality/05-testing-mocha/index.html +++ b/1-js/03-code-quality/05-testing-mocha/index.html @@ -1,17 +1,17 @@ - + - + - + @@ -20,17 +20,17 @@ - + - +
- + From 33e25c1707fea992bc1920524d9ee0ba026945da Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Sat, 25 Feb 2023 11:18:10 +0700 Subject: [PATCH 18/20] Update article.md --- 1-js/03-code-quality/01-debugging-chrome/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index e2197b073..3239ccbd1 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -99,11 +99,11 @@ Vui lòng mở menu thả xuống thông tin ở bên phải (được đánh d Bạn có thể nhấp vào dấu cộng `+` và nhập một biểu thức. Trình gỡ lỗi sẽ hiển thị giá trị của nó bất kỳ lúc nào, tự động tính toán lại giá trị đó trong quá trình thực thi. -2. **`Ngăn xếp cuộc gọi(Call Stack)` -- hiển thị chuỗi cuộc gọi lồng nhau.** +2. **`Ngăn xếp cuộc gọi (Call Stack)` -- 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ó 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. + 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. **`Scope` -- biến hiện tại.** `Local` hiển thị các biến hàm cục bộ. Bạn cũng có thể thấy các giá trị của chúng được đánh dấu ngay trên nguồn. From e4079128970e7da7ca90e8c1a2e9bb7a2f504951 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Sat, 25 Feb 2023 11:18:48 +0700 Subject: [PATCH 19/20] Update chrome-open-sources.svg --- .../03-code-quality/01-debugging-chrome/chrome-open-sources.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg index 33afe2349..782994d70 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg @@ -1 +1 @@ -nguồn mở +mở mã nguồn From bf8a3bf545c49ea5e72bd97ab67e15b77c212aa9 Mon Sep 17 00:00:00 2001 From: I_am_Vietnam <91591390+ImVietnam@users.noreply.github.com> Date: Mon, 27 Feb 2023 09:39:39 +0700 Subject: [PATCH 20/20] Update article.md --- 1-js/03-code-quality/01-debugging-chrome/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 3239ccbd1..74d562f08 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -185,7 +185,7 @@ Như chúng ta có thể thấy, có ba cách chính để tạm dừng tập l 2. Các câu lệnh `debugger`. 3. Lỗi (nếu công cụ dành cho nhà phát triển đang mở và nút đang "bật"). -Khi tạm dừng, chúng tôi có thể gỡ lỗi - kiểm tra các biến và theo dõi mã để xem nơi thực thi sai. +Khi tạm dừng, chúng ta có thể gỡ lỗi - kiểm tra các biến và theo dõi mã để xem nơi thực thi sai. Có nhiều tùy chọn hơn trong các công cụ dành cho nhà phát triển ngoài những gì được đề cập ở đây. Hướng dẫn đầy đủ có tại .