Việc debug hay kiểm soát lỗi của rất nhiều các dòng code là việc không hề đơn giản, thậm chí đối với cả những lập trình viên có nhiều kinh nghiệm. Và một trong những cách mà mọi người hay sử dụng để debug trong JavaScript là console.log(). Tuy nhiên, bên cạnh phương thức này thì còn rất nhiều cách khác giúp cho quá trình debug của bạn vừa dễ dàng vừa nhanh chóng. 

Hãy cùng VietnamWorks inTECH tìm hiểu các phương thức khác là gì ngay trong bài viết sau đây nhé!

1. console.warn() và console.error()

Sử dụng console.error() để in ra một lỗi và console.warn() để in ra một cảnh báo. Những thông báo này có thể giúp bạn nhanh chóng xác định và theo dõi các vấn đề trong mã nguồn.

function exampleFunction() {
  // some code
  if (errorCondition) {
    console.error('An error occurred');
  } else if (warningCondition) {
    console.warn('A warning occurred');
  }
  // more code
}

2. console.assert()

Hàm console.assert() trong JavaScript được sử dụng để kiểm tra một điều kiện, và nếu điều kiện đó là false, nó sẽ in ra một thông báo lỗi trong console. Nếu điều kiện là true, không có thông báo nào được in ra và chương trình tiếp tục chạy.

Cú pháp của console.assert() như sau:

console.assert(condition, message);

• condition: Một biểu thức hoặc giá trị boolean cần kiểm tra.

• message (tùy chọn): Một thông báo sẽ được in ra nếu điều kiện là false. Nếu không được cung cấp, một thông báo mặc định sẽ được in ra.

Dưới đây là một ví dụ minh họa:

function divide(a, b) {
  console.assert(b !== 0, 'Error: Cannot divide by zero');
  return a / b;
}

console.log(divide(10, 2));  // Output: 5
console.log(divide(8, 0));   // Output: Error: Cannot divide by zero

Trong ví dụ này, hàm divide thực hiện phép chia a cho b. Trước khi thực hiện phép chia, console.assert() được sử dụng để kiểm tra xem b có khác 0 không. Nếu b là 0, một thông báo lỗi sẽ được in ra console. Nếu b không phải là 0, phép chia sẽ tiếp tục thực hiện.

Sử dụng console.assert() giúp bạn kiểm tra điều kiện quan trọng trong mã nguồn và cung cấp thông báo lỗi mô tả khi điều kiện không được đáp ứng.

3. console.table()

Hàm console.table() trong JavaScript được sử dụng để in ra một đối tượng hoặc mảng dưới dạng bảng trong console, giúp  dữ liệu hiển thị trở nên dễ đọc và dễ kiểm tra hơn.

Cú pháp của console.table() như sau:

console.table(data, [columns]);

• data: Đối tượng hoặc mảng cần hiển thị dưới dạng bảng.

• columns (tùy chọn): Một mảng các chuỗi, định rõ tên các cột mà bạn muốn hiển thị.

Dưới đây là một ví dụ minh họa:

const students = [
  { id: 1, name: 'John', age: 20, grade: 'A' },
  { id: 2, name: 'Alice', age: 22, grade: 'B' },
  { id: 3, name: 'Bob', age: 21, grade: 'C' }
];

console.table(students);

Kết quả in ra console sẽ trông như sau:

┌─────┬───────┬─────┬───────┐

│ (index) │ id │ name │ age │ grade │

├─────┼───────┼─────┼───────┤

│ 0 │ 1 │ 'John' │ 20 │ 'A' │

│ 1 │ 2 │ 'Alice' │ 22 │ 'B' │

│ 2 │ 3 │ 'Bob' │ 21 │ 'C' │

└─────┴───────┴─────┴───────┘

Trong ví dụ này, một mảng students được hiển thị dưới dạng bảng. Các cột được tự động xác định bằng tên các thuộc tính của đối tượng (trong trường hợp này là id, name, age, và grade). Bảng giúp hiển thị dữ liệu một cách rõ ràng và có tổ chức, đặc biệt là khi bạn có nhiều dữ liệu hoặc muốn theo dõi các thuộc tính cụ thể.

4. Từ khóa debugger 

Từ khóa debugger trong JavaScript được sử dụng để đặt một điểm dừng trong mã nguồn, kích hoạt các công cụ debug của trình duyệt khi mã đang chạy đến điểm đó. Điều này giúp lập trình viên có thể theo dõi và kiểm tra giá trị của biến, điều kiện, và thậm chí thực hiện các bước thực thi mã một cách chi tiết.

Cú pháp của debugger vô cùng đơn giản, chỉ cần đặt từ khóa này tại nơi bạn muốn tạo một điểm dừng:

function exampleFunction() {

 // some code

 debugger; // Execution will pause here

 // more code

Khi chương trình đang chạy và gặp phải từ khóa debugger, nó sẽ tạm dừng thực thi và mở cửa sổ debug của trình duyệt (ví dụ: Chrome DevTools). Ở đây, bạn có thể sử dụng các công cụ debug như breakpoints, watch expressions, và step through để kiểm tra và theo dõi luồng thực thi của mã.

Ví dụ:

function divide(a, b) {
  let result;
  debugger; // Execution will pause here

  if (b !== 0) {
    result = a / b;
  } else {
    console.error('Error: Cannot divide by zero');
    result = null;
  }

  return result;
}

console.log(divide(10, 2));  // Output: 5
console.log(divide(8, 0));   // Output: Error: Cannot divide by zero

Trong ví dụ này, khi chương trình đang chạy đến dòng chứa debugger, nó sẽ tạm dừng, và bạn có thể sử dụng công cụ debug của trình duyệt để kiểm tra giá trị của a, b, và xem liệu điều kiện trong câu lệnh if là true hay false. 

5. performance.now()

Hàm performance.now() là một phương thức trong API Performance của trình duyệt, được sử dụng để đo đạc thời gian giữa hai điểm trong quá trình thực thi mã nguồn JavaScript. Nó trả về một giá trị thời gian tính bằng mili giây (milliseconds) từ thời điểm bắt đầu của trang web hoặc ứng dụng web.

Cú pháp của performance.now():

const startTime = performance.now();

// Some code to measure

const endTime = performance.now();
const elapsedTime = endTime - startTime;

console.log(`Execution time: ${elapsedTime} milliseconds`);

Ví dụ minh họa:

function timeConsumingOperation() {
  let result = 0;

  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
  }

  return result;
}

const startTime = performance.now();

timeConsumingOperation();

const endTime = performance.now();
const elapsedTime = endTime - startTime;

console.log(`Execution time: ${elapsedTime} milliseconds`);

Trong ví dụ này, chúng ta đo đạc thời gian thực thi của hàm timeConsumingOperation(). Hàm này thực hiện một loạt các phép toán và chúng ta sử dụng performance.now() để đo đạc thời gian bắt đầu và kết thúc của hàm, sau đó tính toán thời gian thực thi bằng cách trừ startTime từ endTime. Kết quả được in ra console để theo dõi thời gian thực thi.

Điều này có thể hữu ích khi bạn muốn đo đạc hiệu suất của một đoạn mã, xác định những phần nào mất nhiều thời gian thực thi, và tối ưu hóa mã nguồn của bạn dựa trên những thông tin này.

6. console.group() và console.groupEnd()

console.group() và console.groupEnd() là hai hàm trong API console của JavaScript được sử dụng để nhóm các thông báo trong console lại với nhau, tạo ra một cấu trúc dạng cây, giúp làm cho thông tin hiển thị dễ theo dõi và có tổ chức hơn.

console.group()

Hàm console.group() được sử dụng để bắt đầu một nhóm. Tất cả các thông báo console sau console.group() sẽ được hiển thị dưới dạng một nhóm trong console.

console.groupEnd()

Hàm console.groupEnd() được sử dụng để kết thúc một nhóm. Tất cả các thông báo console sau console.groupEnd() sẽ được hiển thị bình thường, không thuộc nhóm nào nữa.

Ví dụ minh họa:

function exampleFunction() {
  console.log('This is a regular log message.');

  console.group('Group 1');
  console.log('Message 1 inside Group 1');
  console.log('Message 2 inside Group 1');
  console.groupEnd();

  console.log('This is another regular log message.');

  console.group('Group 2');
  console.log('Message 1 inside Group 2');
  console.group('Nested Group');
  console.log('Message inside Nested Group');
  console.groupEnd(); // End of Nested Group
  console.log('Message 2 inside Group 2');
  console.groupEnd(); // End of Group 2

  console.log('Final log message.');
}

exampleFunction();

Kết quả in ra console sẽ trông như sau:

This is a regular log message.

 Group 1

 Message 1 inside Group 1

 Message 2 inside Group 1

This is another regular log message.

 Group 2

 Message 1 inside Group 2

 Nested Group

 Message inside Nested Group

 Message 2 inside Group 2

Final log message

Như bạn có thể thấy, các thông báo được nhóm lại bên trong các nhóm sử dụng console.group() và console.groupEnd(). Điều này giúp theo dõi thông tin và quá trình thực thi của chương trình một cách có tổ chức hơn, đặc biệt là khi có nhiều thông báo console và bạn muốn chúng được hiển thị một cách rõ ràng và hợp lý.

7. console.trace()

Hàm console.trace() trong JavaScript được sử dụng để in ra một trace (dấu vết) của ngăn xếp gọi hàm (call stack) tại thời điểm nó được gọi. Trace này cung cấp thông tin về cách mà chương trình đã đi qua các hàm để đến được điểm hiện tại. Điều này giúp bạn theo dõi quá trình gọi hàm và tìm ra vị trí cụ thể nơi mà hàm console.trace() được gọi.

Dưới đây là một ví dụ minh họa:

function func1() {
  func2();
}

function func2() {
  func3();
}

function func3() {
  console.trace();
}

func1();

Khi chương trình chạy, hàm func1 được gọi, sau đó func1 gọi func2, và func2 lại gọi func3. Trong func3, hàm console.trace() được gọi. Khi đó, kết quả in ra console sẽ giống như sau:

func3 @ script.js:9

func2 @ script.js:5

func1 @ script.js:2

(anonymous) @ script.js:13

Trong ví dụ trên, bạn có thể thấy rõ các hàm đã được gọi và đường dẫn chúng đi qua để đến được tới điểm gọi console.trace(). Điều này giúp rất nhiều khi bạn cần debug và theo dõi lỗi trong mã nguồn của mình.

8. Throwing Errors

Sử dụng throw new Error('message') để tạo ra một lỗi và dừng chương trình. Điều này giúp bạn kiểm tra trạng thái của chương trình tại một thời điểm cụ thể và thông báo lỗi khi cần thiết.

Ví dụ minh họa:

function exampleFunction() {

 // some code

 if (someConditionIsNotMet) {

 throw new Error('Error message');

 }

 // more code

}

9. Debugger trong Trình Duyệt (Browser DevTools)

Trình duyệt web hiện nay thường đi kèm với công cụ Developer Tools, trong đó có bảng điều khiển Debugger. Bạn có thể sử dụng breakpoints, step through code, xem giá trị biến và thậm chí thay đổi giá trị của biến trong quá trình chạy. Điều này giúp bạn có cái nhìn chi tiết và chính xác về cách mã nguồn của bạn đang thực hiện.

Lời kết

Như vậy VietnamWorks vừa điểm qua 9 phương pháp debug khác ngoài console.log mà các bạn có thể áp dụng để gia tăng hiệu suất làm việc của mình. Nếu thấy hay, đừng quên chia sẻ cho bạn bè cùng biết nhé!

VietnamWorks inTECH