Hướng dẫn dùng screen.debug JavaScript

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 http://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: https://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: https://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é.

{} <<< hãy click thử cái này.

Khi đó, file dưới dạng :formatted sẽ được triển khai ra~

9) ELEMENTS CÓ THỂ EDIT APPEARANCE NHANH CHÓNG!

Trong những trường hợp check layout MTG, hẳn không ít bạn từng gặp những ý kiến như “chỗ này nếu chỉnh sửa như vầy, vầy thì được hơn không?”…

Những lúc như thế, nếu mở từng source ra thì thật phiền phức! Và việc thay đổi HTML bằng Elements Tab chính là vị cứu tinh dành cho bạn !!!

VD như ở đây tôi lấy trang web quiita.com để chỉnh sửa.

Trên screen hiện nay đang như thế này:

Ở chỗ này:

sample.html
share your programing knowledge

Các bạn đổi thành

, rồi thay đổi từ [share] thành [let’s share]

Và kết quả:

**********

NOTE: KHI GẶP RÁC RỐI, HÃY ĐỌC CÁC SOURCE

Có nhiều khi những library bạn có không support được cho những rắc rối của bạn.

Khi đó, hãy thử cố gắng xem lại các Code bạn đã viết trên javascript. Từ việc đọc code, bạn sẽ nhanh chóng đưa ra các kết luận ( liệu không dùng parameter này thì có hoạt động không, có sai cái gì không ) … và sớm giải quyết nó !

Ngoài ra, hỏi chính người đã viết các code cũng là một ý hay để giảm thiểu thời gian giải quyết rắc rối.

LỜI KẾT

Developer Tools trên Chrome thực sự rất “bá đạo”, vì thế bạn có thể debug bằng các tool rất đa dạng và phong phú có trên đó.

Mỗi ngày tôi cũng đang cố gắng học hỏi thêm, một dịp nào đó tôi sẽ tổng hợp và chia sẻ nó đến các bạn.

Chúc các bạn thành công !!!