Lời mở đầu
Đây là bài viết chia sẻ những kinh nghiệm cá nhân của tác giả về những phương pháp debug thường sử dụng trong việc phát triển Javascript.
Có rất nhiều cái bạn sẽ thấy quen, và biết về nó thật hiển nhiên, nhưng nếu bạn là một người có hứng thú với các cách làm để phát triển Javascript, tôi nghĩ nó sẽ có ích cho bạn !
1] Hàm Console.log — “lệnh bài” để debug
Thật khó để tìm ra ai hiện nay không sử dụng hàm console.log trong việc phát triển Javascript.
sample.js
console.log['get console'];KẾT QUẢ THỰC HIỆN
Xác nhận kết quả thực hiện trong tab Console của Developer Tools trên Chrome
2] HIỂN THỊ ICON/ COLOR KHI DEBUG BẰNG CONSOLE
Khi nói tới console.log thì người ta sẽ nghĩ là log đơn giản, nhưng thực tế tùy vào dung lượng mà có khi sẽ phát sinh ra các warning hoặc error.
Ta cần nắm bắt và hiểu rõ trong trường hợp đặt nhiều console sẽ có những thông tin gì xuất hiện.
a] CONSOLE.ERROR
Khi bắt lỗi trong error handling, ta sẽ sử dụng cái này:
sample.js
console.error['get error'];KẾT QUẢ THỰC HIỆN
b] CONSOLE.WARN
Về cá nhân tôi thì tôi không thường dùng cái này lắm.
Với cách sử dụng này, mặc dù phần xử lý vẫn có thể tiếp tục, nhưng chỉ có thể sử dụng trong những trường hợp như không đạt 100%, còn với trường hợp ngoài dự kiến lại hiếm khi thực hiện ra đúng console.error
sample.js
console.warn['get warn'];KẾT QUẢ THỰC HIỆN
c] CONSOLE.INFO
Dùng để sử dụng khi muốn vẽ chung line với console.log
Khi muốn nắm bắt những thay đổi của value trong các method dài, tôi sẽ sử dụng nó vào các point phải nhấn mạnh.
sample.js
console.info['get info'];KẾT QUẢ THỰC HIỆN
Nó sẽ theo kiểu như vậy.
Và được sử dụng để không làm sót các value phải xem đầu tiên trong khi đang thực hiện.
[VD với trường hợp nội dung value 3 là cái cần chú ý nhất]
d] TẠO ARRAY DỄ NHÌN THẤY CONSOLE.TABLE
Set để có array như dưới đây:
sample.js
var array=[{
key1:'value1',
key2:'value2',
key3:'value3',
}];Khi console.log phần nội dung giữa của array, nó sẽ cho ra như thế này:
sample.js
console.log[array];KẾT QUẢ THỰC HIỆN [1]
Trông hơi khó nhìn một chút nhỉ *haha*
Và ta sẽ giải quyết vấn đề đó bằng console.table
sample.js
console.table[array];KẾT QUẢ THỰC HIỆN [2]
Mọi thứ đã dễ xem hơn rồi đấy !
e] ĐO LƯỜNG THỜI GIAN THỰC HIỆN
Tốc độ thực hiện viết chương trình cũng là một yếu tố rất quan trọng.
Trong Javascript dĩ nhiên cũng có các phương pháp để các bạn thực hiện đo lường tốc độ xử lý này !
sample.js
console.time['timer'];// Viết process bạn muốn đo lường thời gianconsole.timeEnd['timer'];
KẾT QUẢ THỰC HIỆN
ĐIỀU TRA NGUỒN GỌI RA ARGUMENT
Sử dụng console.trace
sample.js
function saba[] {
function aji[] {
function maguro[] {
//run console.trace
console.trace[];
}
maguro[];
}
aji[];
}// run saba[] function
saba[];
Đây là nội dung cuối cùng trong các mục tôi muốn giới thiệu liên quan đến CONSOLE !
Ngoài ra cũng có rất nhiều thông tin, kiến thức khác liên quan đến console mà nếu như có hứng thú, các bạn hãy tự mình trải nghiệm và học tập nhé.
KẾT QUẢ THỰC HIỆN
Với cách làm này, bạn hầu như nắm được hết các bước đã đi qua của method nào…
3] SỬ DỤNG BREAKPOINT
Nếu sử dụng breakpoimt thì ta có thể thực hiện restart, tạm ngưng… trong khi đang thực hiện program.
Mở tab SOURCE của [Developer Tools] ra, click vào hàng bạn muốn thực hiện breakpoint.
Khi reload page trong trạng thái trên, những xử lý bằng breakpoint đã setting sẽ ngưng lại, có thể thực hiện step.
a] REFRESH XỬ LÝ TỪ BREAKPOINT
Trường hợp refresh lại các xử lý từ breakpoint, nó sẽ hiện ra một loạt button giống như dưới đây, ở phía tay phải của tab SOURCE đã set breakpoint. Việc bạn cần làm chính là thực hiện từ chỗ này !
· Refresh xử lý
Cứ để nguyên như vậy. Khi ấn vào button này thì phần thực hiện sẽ tự động restart.
· Step over
Dù trong trường hợp gọi ra function đi nữa thì nó vẫn không di chuyển xử lý đến argument mà vẫn tiến hành đến hàng tiếp theo.
· Step in
Trong trường hợp gọi ra function, thì sẽ di chuyển xử lý đến function đó, rồi tiến hành xử lý trong function đã di chuyển đến.
· Step out
Thực hiện đến khi kết thúc function và exit function đó.
· Thao tác trên screen
Trường hợp đả setting breakpoint thì không chỉ [developer tools] mà trên screen cũng sẽ hiển thị button step over và restart xử lý, vậy nên ta có thể từ đó và thao tác tiếp.
b] THAY ĐỔI GIÁ TRỊ TRONG LÚC THỰC HIỆN
Set breakpoint, sau đó set [1,2,3,4] vào [sampleArray].
Khi thực hiện như bình thường thì kết quả của console.log chắc chắn sẽ trở thành [1,2,3,4]
Còn trên sampleArray của Scope bên phía tay phải Developer Tools:
Array[4]0:11:22:33:4
Khi set như trên sẽ có thể xác nhận được:
Trong Scope này, thử thay đổi sampleArray thành [100,2000,300,400]
Rồi tiếp tục xử lý các bước tiếp theo trong trạng thái này
Ngay lập tức, kết quả trong tab Sources sẽ trở thành [100,200,300,400]
Hơn thế nữa, kết quả xử lý của tab Console sẽ trở thành như dưới đây:
Set breakpoint như thế, bạn có thể thay đổi được giá trị ngay cả khi đang thực hiện step.
Theo như cách trên, việc thực hiện khi đang test và truyền irregular value trong lúc dev cũng trở nên dễ dàng hơn !
4] CHECK THÔNG TIN TRONG NETWORK
Thông tin HTTP nào có thể truyền đi được?
Các status code hay response có bị gửi trả lại không? — Khi bạn muốn thử xác nhận việc đó, hãy tận dụng tab Network
Lấy ví dụ: thử access vào //qiita.com/ xem nào.
Ta thấy ở đây “200 OK” được trả về
Mở Tab Headers trong Default ra rồi mở tab Response, bạn sẽ thấy file HTML được hiển thị giống như dưới đây:
Trong thực tế, trường hợp phát triển Javascript như là một response được lấy, tôi nghĩ sẽ có nhiều Response API trong format JSON, nhưng trong trường hợp đó format JSON data sẽ bị ẩn trên tab Response này.
5] DÙNG DHC ĐỂ THÔNG TIN
Khi viết xử lý thông tin, ta thường xảy ra nhiều vấn đề như: không biết code này có ổn không, parameter của thông tin truyền có bị sai gì không?… Để giải quyết điều đó, cách thích hợp nhất không gì ngoài thực hiện nội dung muốn truyền bằng code ngoài của Javascript.
Ta sẽ dùng extension của Chrome có tên là DHC để làm nó ~
Link install: //chrome.google.com/webstore/detail/dhc-resthttp-api-client/aejoelaoggembcahagimdiliamlcdmfm
Sau khi install => sẽ hiện icon ở trong app của Chrome. Ta click vào đó.
a] Cách sử dụng:
· Setting phần địa chỉ request
Có thể chọn là http hoặc https đều được.
· Set Header
Set header request.
· Chọn method
· Gửi tin request
· Response
Nội dung response và status code của HTTP sẽ được trả về.
Thêm vào đó, phần nội dung khi request sẽ hiển thị ở chỗ của response.
6] Cookie: Edit This Cookie
Browsing & Manipulating cookie đang sử dụng là EditThisCookie.
Chí ít tôi nghĩ đây là cái coo
kie dễ xài nhất trong debug cookie rồi!
Link install: //chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja
Cách dùng
Nếu Install thành công, sẽ hiện icon của cookie ở phía trên bên phải của Chrome. Hãy click vào đó.
Khi click vào, sẽ hiện ra list của cookie của website đó.
Sau đó, torng lúc debug, bạn hãy thử thay đổi giá trị hay xóa giá trị xem thế nào !
7] THAO TÁC LOCAL STORAGE
Gần đây không chỉ cookie, các dịch vụ sử dụng local storage cũng dần trở nên phổ biến hơn.
Đương là chúng có thể được sử dụng trong Developer Tools của Chrome rồi !
Đối với Session Strage cũng giống vậy, ta có thể thực hiện thao tác từ đây.
8] MINIFIED SOURCE
Khi phát triển bằng Javascript, tôi nghĩ bạn sẽ có nhiều lần thấy qua minified source.
Trong lúc debug, nó sẽ có nhiều cái liên quan với minified source. Nếu chưa nhìn thấy, đừng vội bỏ cuộc, hãy chú ý nhìn các tab source xung quanh nhé.
{}