Trình gỡ lỗi javascript trực tuyến

Là một thành viên lập trình, thông thường bạn sẽ phải sửa lỗi do mã chính của bạn hoặc người khác gây ra. You may be used console. đăng nhập trong một số lần thử gỡ lỗi nhưng đây chỉ là cách mã gỡ lỗi đơn giản

Trong bài viết này, mình sẽ cho bạn biết một số thủ thuật hay nhất để khắc phục lỗi bằng cách gỡ lỗi mã JavaScript trên DevTool của trình duyệt

Google Chrome DevTools là gì?

Google Chrome là một trong những trình duyệt biến phổ biến nhất với công cụ JavaScript tích hợp có tên là V8 và cung cấp một bộ công cụ tuyệt vời cho các nhà phát triển có tên là Chrome DevTools. Bạn nên xem hướng dẫn sửa lỗi JavaScript hoàn chỉnh của họ Hiện tại

Cách debug code JavaScript trên DevTool

Open Google Chrome DevTools

Để mở Google Chrome DevTools, đơn giản nhất là nhấn F12 trên bàn phím. Ngoài ra, bạn có thể nhấn Ctrl + Shift + I trên Windows và Linux hoặc Cmd + Shift + I trên máy Mac. Nếu bạn chỉ thích sử dụng con chuột của mình, hãy truy cập Menu > Công cụ khác > Công cụ dành cho nhà phát triển hoặc chuột phải vào 1 vị trí bất kỳ và chọn Kiểm tra

Làm quen với tab Soucres và Console

Hai tab này có thể sẽ là người bạn tốt nhất của bạn trong khi khắc phục sự cố. Tab Sources can be used to trực quan hóa tất cả các tập lệnh trên trang web bạn đang truy cập. Tab này có các phần dành cho mã cửa sổ, cấu trúc tệp, ngăn xếp cuộc gọi,…

Tab Console là nơi tất cả các đầu ra của nhật ký đi. Ngoài ra, bạn có thể sử dụng lời nhắc của tab Console để thực thi mã JavaScript. Điều này đồng nghĩa với dấu nhắc lệnh trên Windows hoặc thiết bị đầu cuối trên Linux

mẹo. Chuyển đổi bảng điều khiển bất kỳ lúc nào trong DevTools bằng phím Esc

Các phím tắt và tính năng phổ biến

Trong trường hợp bạn có thể truy cập danh sách đầy đủ các phím tắt, dưới đây là một số phím tắt được sử dụng nhiều nhất

• Tìm kiếm 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  1 +

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  2 +

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  3
• Tìm kiếm và mở tệp 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  1+_______15+

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  6
• Nhảy tới dòng 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  1+_______18+

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  0+

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  
  
  
  Code language: JavaScript (javascript)

  8+

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  2
• Thêm điểm dừng 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  1+_______04
• Tạm dừng/tiếp tục thực thi tập lệnh 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  5 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  5
• Bước qua lời gọi hàm tiếp theo 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  7 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  7
• Bước vào lệnh gọi hàm tiếp theo 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  9 

  //# sourceURL=factorialize.js
  
  function factorialize(num) {
    if(num <= 1){
    ...
  Code language: JavaScript (javascript)

  9

Use Source Map

Một trong những tính năng thú vị nhất mà bạn sẽ thích là giải quyết lỗi Dynamic Script, ngay lập tức, thông qua Source Map

Tất cả các câu lệnh đều có thể được hiển thị trong tab Nguồn của DevTools. Tab Nguồn có tất cả các nguồn tệp của JavaScript. Nhưng mã từ trình soạn thảo được thực thi thông qua eval() trong một vùng chứa được gọi đơn giản là máy ảo (VM) trong trình duyệt

Như bạn có thể đoán bây giờ là mã của chúng ta thực sự là một tập lệnh không có tên tệp. Vì vậy, chúng tôi không tìm thấy điều đó trong tab Nguồn

Chúng ta phải tận dụng Source Map để gán tên cho JavaScript từ trình chỉnh sửa. Nó khá đơn giản như sau

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);
Code language: JavaScript (javascript)

Tất cả những gì chúng ta cần làm đều được thêm vào

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...
Code language: JavaScript (javascript)

11 vào đoạn mã đầu tiên, tức là dòng đầu tiên

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...
Code language: JavaScript (javascript)

Bây giờ, hãy mở DevTools và tìm kiếm tên tệp. Thêm điểm dừng, lỗi và tận hưởng bất kỳ điểm dừng nào

Kết luận

Trên đây là một số hướng dẫn giúp bạn có thể hiểu cách debug code JavaScript trên DevTool và ứng dụng vào project thực tế. Chúc bạn thành công