Trong phần này sẽ hướng dẫn ngắn gọn về cách debug javascript cơ bản trên browser.

1. Dùng console.log()

Console.log() hầu như không thể thiếu trong quá trình phát triển với javascript, tuy nhiên ta hay kiểu xuất log đơn thuần bằng lệnh console.log()

Xuất log theo kiểu table

console.table()

Hay

	<script>
		var a = [
			{
				'key1': 10,
				'key2': 20,
			},
			{
				'key1': 30,
				'key2': 40,
			}
		];
		console.table(a,['key1','key2']);
	</script>

Xuất log kiểu error

console.error()

Xuất log kiểu warning

console.warn()

Xuất log trace

Khi bạn đứng từ một function và bạn không biết cội nguồn gọi nó là từ những function nào ? ai dẫn tôi tới đây =)) kiểu lạc đường lạc lối, thì bạn hãy nhớ tới console.trace()

<script>
		run1();
		function run1(){
			run2();
		}
		function run2(){
			run3();
		}
		function run3(){
			console.trace();
		}
</script>

2. Debug với breakpoint

Để thực hiện debug trên browser trước tiên cần phải bật chế độ Inspect (F12).

2.1 Đối với script được viết trực tiếp trên trang html (gồm cả html viết trong file php).

Thao tác: Truy cập link -> F12 -> Chọn tab Source -> Tại khung xanh biển tìm đến file chứa đoạn script cần debug (ở đây là file index3.php) -> Tìm đoạn script và đặt breakpoint.

F10: Chạy qua lệnh tiếp theo
F11: Chạy vào hàm đang gọi
Shift+F11: Thoát ra khỏi hàm đang chạy
F8: Chạy qua tất cả lệnh

Trong đó:

Khung xanh biển: Nơi hiển thị các file resource liên quan đến trang hiện tại đang chạy như css,js,img.
Trong trường hợp này file index3.php có gọi tới file js ngoài (khung xanh lá) vì vậy bên khung xanh biển sẽ hiển thị thêm file resource/js/index.js.

Nếu file đang chạy không gọi thêm bất kỳ file resource nào thì chỗ này chỉ hiển thị file đang chạy là index3.php.

2.2 Đối với script được viết trong file javascript ngoài

Thao tác tương tự như phần 1 chỉ khác là mình chọn đến file script ngoài là index.js

2.3 Sử dụng lệnh debugger

Giả sử bạn đang xem code trên IDE VSCode chẳng hạn và bạn muốn BP(breakpoint) ngay chỗ đó vậy là bạn phải mở browser lên tìm đến file chạy javascript và đặt BP như đã làm ở phần 1 hoặc phần 2 ở trên. Hơi bất tiện đúng không ?

Vậy hãy dùng lệnh debugger; và đặt sẵn vào vị trí trong code javascript mà bạn muốn BP. Lúc này khi debug ở browser nó sẽ nhảy đến đoạn debugger mà bạn đã đặt.

4. Un-Minify file javascript

Khi gặp các file script đã được minify bạn sẽ rất khó xem kiểu như này

Và để dễ xem hơn bạn click vào icon {}

Kết quả

5. Kết

Hy vọng qua bài này nó sẽ giúp ích phần nào cho những bạn chưa biết cách debug javascript, nếu bạn nào có cách xử lý hay hơn nhớ comment bên dưới để chia sẻ thêm. Thanks.