Hướng dẫn chi tiết để gỡ lỗi mã JavaScript trong Chrome Devtools.

Xin chào! Trong phần tiếp theo của chủ đề, chúng ta hãy nói về gỡ lỗi tập lệnh bằng trình duyệt. Ví dụ: hãy sử dụng trình duyệt tốt nhất trên Earth - Chrome.

Về nguyên tắc, các công cụ như vậy có sẵn trong bất kỳ trình duyệt nào và nếu bạn cho rằng hầu hết các trình duyệt hoạt động trên cùng một công cụ như Chrome, thì về nguyên tắc sẽ không có sự khác biệt đặc biệt. Firefox cũng rất tốt với công cụ Firebug của nó.

Chế độ xem chung của bảng Nguồn

Khởi chạy trình duyệt Chrome của bạn.

Nhấn F12, thao tác này sẽ khởi chạy Công cụ dành cho nhà phát triển.

Chuyển đến tab Nguồn

Có 3 khu ở đây:

1. Khu vực tệp nguồn. Nó chứa tất cả các tệp dự án
2. Khu vực của văn bản. Khu vực này chứa văn bản của tệp
3. Khu vực thông tin và kiểm soát. Chúng ta sẽ nói về cô ấy sau.

Thông thường, khi gỡ lỗi, khu vực nguồn không cần thiết, vì vậy bạn có thể ẩn nó bằng nút.

Các nút điều khiển chung

3 nút điều khiển thông dụng nhất:

Điểm ngắt

Hãy xem tệp pow.js làm ví dụ. Nếu bạn nhấp vào bất kỳ dòng nào trong tệp này, một điểm ngắt sẽ được đặt trên dòng đó.

Nó trông giống như sau:

Một điểm ngắt khác được gọi là điểm ngắt, đây là một biệt ngữ khác đã được đồng hóa trong ngôn ngữ của chúng ta và theo nghĩa đen cũng có nghĩa là điểm ngắt.

Trong đoạn mã mà bạn tạo điểm ngắt, nói chung, bạn có thể xem giá trị của các biến ở mỗi bước, theo dõi nó theo mọi cách có thể.

Thông tin về điểm ngắt xuất hiện trên tab Điểm ngắt.

Tab Breakpoints rất hữu ích khi mã rất lớn, nó cho phép bạn:

• Nhanh chóng đi đến vị trí của mã nơi điểm ngắt được đặt bằng một cú nhấp chuột đơn giản vào văn bản.
• Tạm thời vô hiệu hóa điểm ngắt bằng cách nhấp vào hộp kiểm.
• Xóa nhanh một điểm ngắt bằng cách nhấp chuột phải vào văn bản và chọn Xóa.

Một số tính năng bổ sung

• Một điểm ngắt có thể được khởi tạo trực tiếp từ tập lệnh bằng cách sử dụng lệnh trình gỡ lỗi: function pow (x, n) (... debugger; //<-- отладчик остановится тут... }

• Nhấp chuột phải vào số dòng pow.js sẽ cho phép bạn tạo cái gọi là điểm ngắt có điều kiện, tức là đặt điều kiện mà theo đó điểm ngắt sẽ được kích hoạt.

Dừng lại và nhìn xung quanh

Vì hàm của chúng tôi đang thực thi cùng lúc khi trang được tải, nên cách dễ nhất để kích hoạt trình gỡ lỗi JavaScript là tải lại nó. Để thực hiện việc này, hãy nhấn F5. Và đồng thời, việc thực thi script sẽ được dừng lại ở dòng thứ 6.

Chú ý đến các tab thông tin:

• Xem biểu thức- ở đây bạn có thể thấy giá trị hiện tại của các biến mà bạn theo dõi trong tập lệnh.
• Gọi Stack- hiển thị ngăn xếp cuộc gọi - đây là tất cả các lệnh gọi dẫn đến dòng mã này.
• Biến phạm vi- hiển thị các biến. Hơn nữa, nó hiển thị cả biến cục bộ và toàn cục.

Kiểm soát thực thi

Bây giờ chúng ta hãy "chạy" script và theo dõi công việc của nó. Hãy chú ý đến bảng điều khiển ở trên cùng có 6 nút, chúng ta sẽ xem xét công việc của chúng.

Thực thi một bước của script mà không cần vào bên trong hàm.

thực thi hoàn toàn mã trong hàm.

Bản thân quá trình gỡ lỗi bao gồm bước qua chương trình và quan sát giá trị của các biến.

Bảng điều khiển trình duyệt

Khi gỡ lỗi mã script, có thể hữu ích khi chuyển đến tab Console và xem có lỗi nào không, bạn cũng có thể xuất thông tin ra console bằng console.log ().

Ví dụ:

// kết quả sẽ hiển thị trong bảng điều khiển cho (var i = 0; i< 6; i++) { console.log("значение", i); }

Bảng điều khiển có sẵn trong mọi trình duyệt

Lỗi trong bảng điều khiển

Có thể xem lỗi tập lệnh JavaScript trong bảng điều khiển.

Trong bảng điều khiển, bạn có thể thấy:

Dòng màu đỏ là thông báo lỗi thực sự.

Toàn bộ

Trình gỡ lỗi cho phép bạn:

• Dừng lại tại điểm đã đánh dấu (điểm ngắt) hoặc bằng lệnh gỡ lỗi.
• Thực thi mã - để gỡ lỗi chương trình tại một thời điểm hoặc tại một thời điểm nhất định.
• Giám sát các biến, thực hiện các lệnh trong bảng điều khiển, v.v.

Có các tab khác trong công cụ dành cho nhà phát triển, chẳng hạn như Elements cho phép bạn xem mã HTML của trang, Dòng thời gian hiển thị số lượng tệp mà trình duyệt tải xuống và mất bao lâu. Nhưng hiện tại, những tab này không thú vị lắm đối với chúng tôi.

Rất dễ bị mất khi viết mã JavaScript mà không có trình gỡ lỗi.

Gỡ lỗi JavaScript

Thật khó để viết mã JavaScript mà không có trình gỡ lỗi.

Mã của bạn có thể chứa lỗi cú pháp hoặc lỗi logic khó chẩn đoán.

Thông thường, khi mã JavaScript có lỗi, không có gì xảy ra. Không có thông báo lỗi và bạn sẽ không nhận được bất kỳ hướng dẫn nào về nơi tìm lỗi.

Thông thường, lỗi sẽ xảy ra mỗi khi bạn cố gắng viết một số mã JavaScript mới.

Trình gỡ lỗi JavaScript

Tìm lỗi trong mã chương trình của bạn được gọi là gỡ lỗi mã của bạn.

Gỡ lỗi không dễ dàng. May mắn thay, tất cả các trình duyệt hiện đại đều có trình gỡ lỗi tích hợp sẵn.

Có thể bật và tắt trình gỡ lỗi tích hợp bằng cách buộc thông báo lỗi cho người dùng.

Với trình gỡ lỗi, bạn cũng có thể đặt các điểm ngắt (nơi mà việc thực thi mã có thể dừng lại) và kiểm tra các biến trong khi mã đang được thực thi.

Thông thường, nếu không, hãy làm theo hướng dẫn ở cuối trang này, bạn sẽ bật gỡ lỗi trong trình duyệt bằng phím F12 và chọn "Bảng điều khiển" từ trình đơn trình gỡ lỗi.

Phương thức console.log ()

Nếu trình duyệt của bạn hỗ trợ gỡ lỗi, bạn có thể sử dụng console.log () để hiển thị các giá trị JavaScript trong cửa sổ trình gỡ lỗi:

thí dụ

Trang web đầu tiên của tôi

Đặt điểm ngắt

Trong cửa sổ trình gỡ lỗi, bạn có thể đặt các điểm ngắt trong mã JavaScript.

Tại mỗi điểm ngắt, JavaScript sẽ ngừng thực thi và cho phép bạn kiểm tra các giá trị JavaScript.

Sau khi tìm hiểu ý nghĩa, bạn có thể tiếp tục thực thi mã (thường bằng nút phát).

Từ khóa của trình gỡ lỗi

Trình gỡ lỗi từ khóa dừng thực thi JavaScript và gọi (nếu có) đến hàm gỡ lỗi.

Điều này có chức năng tương tự bằng cách thiết lập một điểm ngắt trong trình gỡ lỗi.

Nếu không có gỡ lỗi, câu lệnh gỡ lỗi không có hiệu lực.

Với trình gỡ lỗi được bật, mã này sẽ ngừng thực thi trước khi thực thi dòng thứ ba.

Các trình duyệt chính "Công cụ gỡ lỗi

Thông thường, bạn bật gỡ lỗi trong trình duyệt của mình với F12 và chọn "Bảng điều khiển" từ trình đơn trình gỡ lỗi.

Nếu không, hãy làm theo các bước sau:

Trình duyệt Chrome

• Mở trình duyệt của bạn.
• Chọn các công cụ từ menu.
• Cuối cùng, chọn Console.

Firefox Firebug

• Mở trình duyệt của bạn.
• Đi tới trang web:
  http://www.getfirebug.com
• Làm theo các hướng dẫn như:
  cài đặt Firebug

trình duyệt web IE

• Mở trình duyệt của bạn.
• Chọn các công cụ từ menu.
• Từ các công cụ, hãy chọn các công cụ dành cho nhà phát triển.
• Cuối cùng, chọn Console.

Opera

• Mở trình duyệt của bạn.
• Đi tới trang web:
  http://dev.opera.com
• Làm theo các hướng dẫn như:
  thêm nút bảng điều khiển dành cho nhà phát triển vào thanh công cụ.

Safari Firebug

• Mở trình duyệt của bạn.
• Đi tới trang web:
  http://extensions.apple.com
• Làm theo các hướng dẫn như:
  cài đặt Firebug Lite.

Trình đơn phát triển Safari

• Chuyển đến Safari, Preferences, Advanced trong menu chính.
• Chọn hộp bên cạnh Bật Hiển thị Thực đơn trên Thanh Trình đơn Thiết kế.
• Khi tùy chọn "Phát triển" mới xuất hiện trong menu:
  Chọn "Hiển thị bảng điều khiển lỗi".

Khả năng gỡ lỗi mã là một kỹ năng quan trọng của nhà phát triển. Điều quan trọng là phải hiểu và sử dụng nhiều loại công cụ gỡ lỗi tồn tại cho một ngôn ngữ lập trình cụ thể.

Thật không may, việc gỡ lỗi có vẻ không quá rõ ràng khi làm việc với JavaScript bên ngoài IDE chính thức. Ít nhất là ở cái nhìn đầu tiên.

Bài viết này sẽ xem xét cách bạn có thể gỡ lỗi mã JavaScript trong Google Chrome Dev Tools và trong trình chỉnh sửa Visual Studio Code.

Ghi chú của người dịch: bằng cách nhấp vào liên kết này, bạn có thể xem phiên bản video của bài viết này Gỡ lỗi JavaScript trong Google Chrome và Visual Studio Code bằng tiếng Anh.

Cài đặt trước

Bài viết này sẽ hướng dẫn bạn quy trình gỡ lỗi bằng ứng dụng mẫu có tên "Trò chuyện nhanh":

Bạn có hai cách để làm việc với ứng dụng này. Bạn có thể tự tạo nó bằng cách sử dụng cái này một loạt các video hướng dẫn... Ngoài ra, bạn có thể sử dụng mã nguồn của ứng dụng Trò chuyện nhanh được tạo sẵn:

Cho dù bạn chọn tùy chọn nào, bạn sẽ cần chạy ứng dụng Trò chuyện nhanh cục bộ.

Bạn có thể chạy ứng dụng từ bên dưới Node.js ( Tôi phải làm nó như thế nào). Hoặc sử dụng một plugin cho Visual Studio Code có tên là Live Server.

Nếu bạn chưa quen với plugin này, bạn có thể tìm hiểu cách làm việc với nó bằng cách sử dụng video này - Phần mở rộng Máy chủ Trực tiếp trong Mã Visual Studio.

Ghi chú của người dịch: Video bằng tiếng Anh.

Về mặt kỹ thuật, tôi đang nhận sai tên người dùng khi sử dụng usernameInput.text thay vì tên người dùng chính xácInput.value. Nếu tôi mắc phải một sai lầm như vậy trong đời thực, suy nghĩ đầu tiên của tôi là sử dụng công cụ console.log ().

Nhưng đây không phải là trường hợp chính xác có thể giúp tôi, như bạn có thể thấy trong hình ảnh bên dưới. Nếu sử dụng console.log () cũng là suy nghĩ đầu tiên của bạn, thì bạn đã đến đúng nơi và bạn đang làm đúng khi đọc bài viết này!

Kiến thức cơ bản về gỡ lỗi

Hãy bắt đầu với những điều cơ bản. Ý tưởng đằng sau việc gỡ lỗi là bạn có thể đặt cái gọi là điểm ngắt ( điểm ngắt) để dừng việc thực hiện chương trình tại một thời điểm nhất định.

Điều này cung cấp cho bạn, với tư cách là nhà phát triển, khả năng xem xét trạng thái hiện tại của ứng dụng và kiểm tra, chẳng hạn như giá trị của các biến trong đó. Bạn thậm chí có thể làm nhiều hơn nữa và theo dõi bất kỳ biến nào bạn chọn để bất cứ khi nào ứng dụng dừng, bạn có thể kiểm tra giá trị của các biến đó.

Sau khi thiết lập một điểm ngắt ( điểm ngắt) trong mã, như một quy tắc, có một số tùy chọn cho các hành động tiếp theo:

• tiếp tục thực hiện chương trình
• từng bước qua tất cả các giai đoạn của quá trình thực thi chương trình - từng dòng một
• thoát khỏi chức năng hiện tại bạn đang ở
• đi đến chức năng tiếp theo

Bạn cũng sẽ có quyền truy cập để xem ngăn xếp cuộc gọi ( cuộc gọi ngăn xếp). Nói cách khác, vì các hàm trong chương trình có thể gọi các hàm khác để thực thi, bạn có thể xem lịch sử cuộc gọi các chức năng này.

Gỡ lỗi trong Google Chrome

Để bắt đầu gỡ lỗi ứng dụng trong trình duyệt Google Chrome, hãy thêm các nút clickBtn trong trình xử lý sự kiện nhà điều hành trình gỡ lỗi như được hiển thị bên dưới:

Khi quá trình thực thi chương trình đạt đến dòng với câu lệnh trình gỡ lỗi, ứng dụng sẽ bị tạm dừng và các công cụ gỡ lỗi của trình duyệt Google Chrome sẽ tự động được kích hoạt.

Lưu ý rằng ứng dụng chuyển sang màu xám trong cửa sổ trình duyệt để cho biết rằng nó đang bị tạm dừng. Cũng xin lưu ý rằng tab Nguồn trong Công cụ dành cho nhà phát triển của Chrome được mở tự động:

Hãy xem những gì chúng ta thấy trong tab Nguồn.

Tab nguồn

Điều đầu tiên bạn có thể nhận thấy trên tab này là bản sao mã nguồn của ứng dụng. Đây là mã mà trình duyệt đã tải xuống và nó hoạt động với nó.

Bạn cũng có thể nhận thấy rằng dòng mã với câu lệnh trình gỡ lỗi được đánh dấu bằng màu xanh lam để thông báo cho chúng tôi rằng ứng dụng đã dừng tại thời điểm này trong mã:

Trình duyệt Google Chrome cung cấp cho chúng tôi khả năng xem mã nguồn của ứng dụng. Với mã nguồn trước mặt, bạn có thể cài đặt trong đó điểm ngắt.

Điểm ngắt được dùng để đánh dấu điểm mà bạn muốn dừng việc thực thi chương trình. Nhà điều hành trình gỡ lỗi mà chúng tôi đã sử dụng trong ví dụ trên có các chức năng như điểm ngắt, nhưng trong mã nguồn của ứng dụng, đây là điểm ngắt nó không nhất thiết phải là một.

Điểm ngắt - Cố ý dừng hoặc làm gián đoạn quá trình thực hiện chương trình

Thêm vào điểm ngắt, bạn cần nhấp vào gutter - trường ở bên trái của việc đánh số các dòng mã. Ngay sau khi bạn hoàn thành hành động này, bạn sẽ nhận thấy rằng trình duyệt Google Chrome đã tự động thêm điểm ngắt vào danh sách "Điểm ngắt":

Tab phạm vi

Trong tab Phạm vi, bạn có thể theo dõi các biến trong ứng dụng của mình. Lưu ý rằng tab này có ba phần: phạm vi cục bộ ( Địa phương), phạm vi toàn cầu ( Toàn cầu) và phần viết kịch bản ( Kịch bản).

Trong phần script, bạn có thể theo dõi các biến trong phạm vi của script hiện tại:

Bạn sẽ dành phần lớn thời gian trong quá trình gỡ lỗi ứng dụng trong tab này. Đây là một giải pháp thay thế hiệu quả hơn nhiều so với việc sử dụng nhiều console.log ().

Tab xem

Như đã đề cập trước đó, ngoài việc xem các biến trong tab Phạm vi, bạn cũng có thể xác định các biến có giá trị mà bạn muốn theo dõi trong toàn bộ chương trình chạy.

Bằng cách thêm một biến trong tab Watch, mỗi khi bạn đặt một điểm ngắt, bạn có thể nhanh chóng kiểm tra giá trị của biến đó (có thể không được xác định tùy thuộc vào vị trí của bạn trong mã).

Nhấp vào dấu cộng và nhập tên của biến bạn muốn theo dõi, trong trường hợp của chúng tôi, đó là usernameInput:

Bước, ngăn xếp cuộc gọi và danh sách điểm ngắt

Phần của tab "Nguồn", nằm ở góc dưới bên trái của cửa sổ trình gỡ lỗi, cho phép bạn xem danh sách các điểm ngắt, ngăn xếp cuộc gọi ( cuộc gọi ngăn xếp) Vân vân.

V cuộc gọi ngăn xếp chỉ có một chức năng, đó là một trình xử lý sự kiện cho nút đăng nhập. Hàm được liệt kê vì nó là hàm duy nhất được gọi cho đến nay. Vì một số hàm có thể gọi các hàm khác để thực thi, chuỗi này sẽ được cập nhật tương ứng.

Cũng để ý các nút mũi tên ở đầu màn hình. Chúng tương ứng với các chức năng ở trên để tiếp tục thực thi mã của bạn hoặc từng dòng một ( bước). Tôi khuyên bạn nên thử nghiệm các nút này một chút để làm quen với cách bạn có thể thực thi mã.

Cuối cùng, có nhiều loại điểm ngắt khác nhau có thể được thiết lập. Hãy xem một ví dụ về cách tạo một điểm ngắt có điều kiện ( điểm ngắt có điều kiện), sẽ chỉ được kích hoạt khi một điều kiện nhất định được đáp ứng.

Ví dụ: giả sử chúng ta muốn ngăn sự kiện trên nút đăng nhập chỉ được xử lý khi người dùng cố gắng đăng nhập mà không nhập tên người dùng.

Chúng ta có thể làm điều này bằng cách nhấp chuột phải vào hộp máng xối và tạo điểm ngắt với điều kiện sau - usernameInput.text === "":

Trong trường hợp gỡ lỗi ứng dụng Trò chuyện nhanh, nếu bạn nhấn nút đăng nhập mà không có tên người dùng, điều này sẽ được khởi chạy. điểm ngắt... Nếu không, mã sẽ tiếp tục thực thi như bình thường.

Xin lưu ý rằng thậm chí còn có nhiều tùy chọn hơn. điểm ngắt không được đề cập trong bài viết này.

Gỡ lỗi trong mã Visual Studio

Công cụ dành cho nhà phát triển Chrome là một trong những công cụ tốt nhất của loại hình này. Như bạn đã thấy, nó cung cấp các tính năng và chức năng tuyệt vời để gỡ lỗi ứng dụng của bạn.

Tuy nhiên, rất nhiều công việc đã được thực hiện bởi nhóm phát triển Visual Studio Code để làm cho quá trình gỡ lỗi trong trình chỉnh sửa này trở nên hoàn hảo hơn nữa.

Tôi thực sự thích Visual Studio Code và dành nhiều thời gian cho nó hơn bất kỳ trình soạn thảo mã nào khác. Quá trình này bao gồm gỡ lỗi.

Để bắt đầu gỡ lỗi mã của bạn trong VS Code, bạn sẽ cần cài đặt plugin Trình gỡ lỗi cho Chrome:

Hãy xem tab Debug. Theo mặc định, nó nằm trên thanh bên của trình chỉnh sửa. Mở tab này bằng cách nhấp vào biểu tượng trông giống như một con bọ ( sâu bọ).

Khi bạn mở bảng điều khiển này, bạn sẽ thấy các công cụ rất giống với những công cụ chúng ta đã thấy trong trình duyệt Google Chrome - biến, cuộc gọi ngăn xếp, điểm ngắt:

Hầu hết các chức năng mà chúng tôi đã xử lý trong Công cụ dành cho nhà phát triển của Chrome cũng có sẵn trong VS Code.

Bây giờ chúng ta đã quen thuộc với tab Debug, chúng ta cần tạo một cấu hình sẽ cho trình soạn thảo VS Code biết cách gỡ lỗi ứng dụng của chúng ta.

VS Code lưu trữ cấu hình gỡ lỗi trong tệp khởi chạy.json bên trong thư mục .vscode. Để nhờ Mã VS tạo tệp này cho chúng tôi, hãy mở menu thả xuống "Không có cấu hình" trong menu trình chỉnh sửa và chọn "Thêm cấu hình".

VS Code lưu trữ cấu hình gỡ lỗi trong một tệp có tên là launcher.json bên trong thư mục .vscode

Sau đó chọn "Chrome" từ danh sách này.

Trong vài năm trở lại đây, JavaScript đã nổi lên như một ngôn ngữ hàng đầu cho các dự án web viết kịch bản nhờ sự xuất hiện của nhiều thư viện khác nhau như jQuery và Prototype. Sự phổ biến ngày càng tăng và tính dễ sử dụng đã dẫn đến các ứng dụng chính thức như Gmail, chứa hàng nghìn dòng JavaScript, đặt ra yêu cầu ngày càng cao đối với nhóm phát triển về trình độ sử dụng công cụ.

Do sự phức tạp ngày càng tăng của các ứng dụng, nên cần có các công cụ gỡ lỗi mạnh mẽ có thể nhanh chóng và hiệu quả tìm ra nguồn gốc của lỗi. Đầu ra đơn giản của các giá trị biến bằng cách sử dụng một hàm báo động ()đã mất đi sự liên quan của nó.

Bài học này cung cấp tổng quan ngắn gọn về các khả năng của các công cụ dành cho nhà phát triển hiện đại giúp làm cho việc gỡ lỗi mã JavaScript trở thành một quá trình dễ dàng hơn. Trọng tâm sẽ là các khả năng của trình duyệt Chrome và tiện ích bổ sung Firebug cho FireFox, nhưng hầu hết các tính năng được mô tả đều có sẵn trong các công cụ khác, chẳng hạn như Dragonfly cho Opera.

Bảng điều khiển - chế độ xem chung

Trong hầu hết các chương trình dành cho nhà phát triển, người bạn tốt nhất của lập trình viên sẽ là bàn điều khiển. Bảng điều khiển đa năng được sử dụng để ghi lại các thông báo lỗi, kiểm tra DOM, gỡ lỗi mã JavaScript và nhiều tác vụ khác. Tùy thuộc vào trình duyệt, bảng điều khiển được gọi bằng các lệnh khác nhau (ngoại trừ lựa chọn trực tiếp thông qua menu):

• trong trình duyệt Chrome và Dragonfly cho Opera - Ctrl + Shift + I
• Firebug - F12

Bảng điều khiển tự động hiển thị các lỗi trong mã được phát hiện trong quá trình thực thi tập lệnh. Tệp và dòng được biểu thị bên cạnh lỗi và việc nhấp vào lỗi sẽ di chuyển tiêu điểm đầu vào đến vị trí tương ứng của nó.

Chúng tôi xuất dữ liệu ra bảng điều khiển

Bảng điều khiển không chỉ có thể hiển thị lỗi trong mã tập lệnh. Sử dụng API bảng điều khiển và API dòng lệnh, bạn có thể kiểm soát đầu ra của dữ liệu vào bảng điều khiển. Nhóm nổi tiếng và hữu ích nhất .log ().

Khi thiết kế mã biểu mẫu, rất hữu ích khi biết giá trị của các biến để xác minh rằng mã đang hoạt động chính xác. Thực tế phổ biến là sử dụng hàm báo động ()để kiểm soát trực quan. Tuy nhiên, việc sử dụng phương pháp này sẽ chặn phần còn lại của mã thực thi cho đến khi nhấp vào nút trong hộp thoại.

Giải pháp hiện đại là sử dụng phương pháp console.log xuất giá trị của các biến vào bảng điều khiển:

Console.log ("Nhật ký thuyền trưởng"); // in "Captain's Log" vào bảng điều khiển

Phương thức có thể được sử dụng để hiển thị các giá trị được tính toán:

Hàm calcPhotos () (total_photos_diff = total_photos - pres_total_photos; // In các giá trị biến vào bảng điều khiển console.log (total_photos_diff);)

Ưu điểm của phương pháp này so với phương pháp đối thoại báo động () là việc thực thi mã không bị gián đoạn và nhà phát triển có thể hiển thị giá trị của các biến nhiều lần để quan sát các thay đổi trong dữ liệu trong thời gian thực.

Var t = 3, p = 1; function calcPhotos (total_photos, pres_total_photos) (var total_photos_diff = total_photos - pres_total_photos; // In các giá trị ra bảng điều khiển console.log (total_photos_diff); // Cập nhật các giá trị t = t * 1.3; p = p * 1.1 ;) setInterval (function () (calcPhotos (t, p);), 100);

Đánh dấu thông điệp

Trong ví dụ trên, vòng lặp sẽ in nhiều giá trị biến vào bảng điều khiển. Tuy nhiên, thường thuận tiện để phân tách các dữ liệu khác nhau một cách trực quan để làm nổi bật hiệu quả các vùng trong mã cần chú ý đặc biệt. API Console có một số phương pháp để thực hiện các tác vụ này.

console.info (): Hiển thị biểu tượng thông tin và đánh dấu thông tin sẽ được trình bày. Phương pháp này hữu ích để cảnh báo về các sự kiện khác nhau.

console.warn (): Hiển thị biểu tượng cảnh báo và đánh dấu thông tin sẽ được trình bày. Nó là thuận tiện để sử dụng cho thông tin về các thông số vượt quá giới hạn.

console.error (): Hiển thị biểu tượng "lỗi" và đánh dấu thông tin sẽ được trình bày. Thuận tiện để sử dụng để báo cáo lỗi và các tình trạng nghiêm trọng.

Lưu ý: Công cụ dành cho nhà phát triển Chrome không có phương tiện trình bày thông tin khác trong bảng điều khiển.

Sử dụng các phương pháp khác nhau để xuất thông tin ra bảng điều khiển cho phép bạn trực quan hóa dữ liệu. Việc trình bày thông tin có thể được cải thiện bằng cách kết hợp thành các khối. Phương pháp được sử dụng console.group () :

// Nhóm đầu tiên console.group ("Phép tính ảnh"); console.info ("Tổng số chênh lệch hiện là" + total_photos_diff); console.log (total_photos_diff); console.groupEnd (); // Nhóm thứ hai console.group ("Biến tăng dần"); console.log ("Tổng số ảnh bây giờ là:" + t); console.log ("Tổng số ảnh trước đó là:" + p); console.groupEnd ();

Ví dụ này sẽ nhóm thông tin trong bảng điều khiển. Hình ảnh hiển thị sẽ khác nhau trong các trình duyệt khác nhau, hình ảnh dưới đây cho thấy sự xuất hiện trong Dragonfly for Opera:

Các ví dụ trên cung cấp một danh sách nhỏ các phương thức có sẵn từ API Console. Có nhiều phương pháp hữu ích khác được ghi lại trên trang Firebug chính thức.

Tiến trình tập lệnh gián đoạn

Đầu ra của bảng điều khiển rất hữu ích, nhưng mã có thể chạy rất nhanh và vẫn theo dõi được nhiều biến.

Để tạo thuận lợi cho quá trình gỡ lỗi, bạn có thể ngắt việc thực thi mã tại một điểm cụ thể để có quyền truy cập vào dữ liệu. Các điểm ngắt được sử dụng cho việc này.

Làm việc với các điểm ngắt

Để đặt điểm ngắt, hãy chuyển đến tab "Tập lệnh" và chọn tập lệnh cần thiết từ danh sách. Bây giờ chúng tôi đang tìm dòng mà bạn cần ngắt quá trình thực thi tập lệnh và nhấp vào trường có số dòng để kích hoạt - một chỉ báo trực quan sẽ xuất hiện. Bây giờ chúng tôi tải lại trang và quá trình thực thi mã sẽ gián đoạn tại điểm đã cho:

Khi quá trình thực thi bị gián đoạn, bạn có thể đặt con trỏ chuột lên bất kỳ biến nào và trình gỡ lỗi sẽ hiển thị gợi ý với giá trị tại thời điểm hiện tại.

Sau đó, bạn có thể tiếp tục thực thi mã bằng các nút đặc biệt nằm ở đầu thanh bên:

Trong thanh bên, bạn có thể theo dõi trạng thái mã của mình, bao gồm động lực của các biến cục bộ và toàn cục.

Các điểm ngắt có điều kiện

Trong quá trình gỡ lỗi mã, đôi khi cần phải dừng việc thực thi mã chỉ khi đáp ứng các điều kiện nhất định. Ví dụ, nếu script của bạn có một vòng lặp, mỗi lần lặp mất 50 mili giây, thì sẽ rất bất tiện khi bắt đầu quá trình thực thi sau khi dừng lại ở mỗi bước, khi chúng ta chỉ cần 300 lần lặp. Đối với những trường hợp như vậy, có những ngắt có điều kiện.

Trong ví dụ trong hình, việc thực thi mã sẽ không bị gián đoạn cho đến khi giá trị của biến total_photos_diff sẽ không quá 200.

Để kích hoạt điểm ngắt có điều kiện, nhấp chuột phải vào điểm ngắt và chọn mục "Chỉnh sửa điểm ngắt" để hiển thị hộp thoại chỉnh sửa điều kiện hình thành điểm ngắt.

Đặt điểm ngắt trong mã

Không phải lúc nào việc đặt các điểm ngắt bằng giao diện công cụ dành cho nhà phát triển trong trình duyệt cũng thuận tiện. Đôi khi, khởi động trình gỡ lỗi từ mã dễ dàng hơn bằng một lệnh đặc biệt. Ví dụ dưới đây cho thấy cách bạn có thể làm gián đoạn việc thực thi mã của mình khi đáp ứng các điều kiện nhất định:

If (total_photos_diff> 300) (trình gỡ lỗi; // khởi động trình gỡ lỗi và làm gián đoạn quá trình thực thi mã)

Các cách khác để làm gián đoạn việc thực thi mã

Ngoài việc sử dụng điểm ngắt, công cụ dành cho nhà phát triển cung cấp các tùy chọn khác để dừng thực thi mã trong các trường hợp khác nhau.

Ngừng thay đổi DOM

Nếu bạn cần gỡ lỗi một đoạn mã xử lý các thay đổi của DOM, công cụ dành cho nhà phát triển sẽ cung cấp cho bạn một cách để dừng thực thi mã khi một nút DOM thay đổi.

Trên bảng mã HTML, khi bạn nhấp chuột phải vào phần tử mong muốn, bạn có thể chọn các điều kiện để dừng mã (thay đổi thuộc tính, thêm / xóa con cháu, xóa một phần tử) khi DOM thay đổi. Tải lại mã và khi các phần tử thay đổi, quá trình thực thi mã sẽ dừng lại.

Dừng trên tất cả hoặc các trường hợp ngoại lệ không được khắc phục

Hầu hết các công cụ dành cho nhà phát triển đều cho phép bạn dừng thực thi tập lệnh khi các ngoại lệ được ném ra. Trong Chrome, chức năng này có thể được bật bằng biểu tượng "Tạm dừng" ở dòng dưới cùng của giao diện.

Bạn có thể chọn ngoại lệ nào mà việc thực thi mã sẽ dừng lại. Ví dụ dưới đây minh họa một ngoại lệ được xử lý và một ngoại lệ được xử lý (try | catch block):

Var t = 3, p = 1; function calcPhotos (total_photos, pres_total_photos) (var total_photos_diff = total_photos - pres_total_photos; // Nhóm đầu tiên console.info ("Tổng số chênh lệch hiện là" + total_photos_diff); // Cập nhật giá trị t = t + 5; p = p + 1 ; / / Không xử lý ngoại lệ if (total_photos_diff> 300) (ném 0;) // Không xử lý ngoại lệ if (total_photos_diff> 200) (try ($$ ("# nonexisting-element"). Hide ();) catch (e) ( console. error (e);))) setInterval (function () (calcPhotos (t, p);), 50);

Giới thiệu về ngăn xếp cuộc gọi

Nếu lỗi xuất hiện trong khi thực thi tập lệnh của bạn, thì các phương pháp trên sẽ giúp bạn dừng chương trình để phân tích lỗi. Nhưng không phải lúc nào lý do cũng rõ ràng ngay lập tức.

Khi tập lệnh bị gián đoạn, hãy nhìn vào ngăn bên phải, ngăn cung cấp thông tin hữu ích, bao gồm ngăn xếp Cuộc gọi.

Ngăn xếp cuộc gọi hiển thị đường dẫn đầy đủ dẫn đến điểm xảy ra lỗi và dừng thực thi mã.

Trong hình bên dưới, lỗi được cố ý tạo ra trong hàm incrementValues ​​(), khiến việc thực thi mã bị dừng lại. công cụ dành cho nhà phát triển hiển thị ngăn xếp cuộc gọi hoàn chỉnh, cho phép bạn xác định những nơi nguy hiểm tiềm ẩn.

Phần kết luận

Bài học này là điểm khởi đầu cho việc nghiên cứu chi tiết hơn về tài liệu cho công cụ mà bạn định sử dụng tích cực.

Hãy quên việc gỡ lỗi với console.log mãi mãi! Tìm hiểu cách sử dụng các điểm ngắt để gỡ lỗi mã trong Công cụ dành cho nhà phát triển Chrome

Bản dịch của một bài báoBrandon morelli : Tìm hiểu cách gỡ lỗi JavaScript bằng Chrome DevTools ... Được xuất bản với sự cho phép của tác giả.

Tìm và sửa lỗi có thể khó khăn. Bạn có thể bị cám dỗ sử dụng console.log () ngoài tầm kiểm soát để mã của bạn hoạt động chính xác. Mọi chuyện đã kết thúc rồi!

Bài viết này là về cách đúng để gỡ lỗi! Tìm hiểu cách sử dụng các công cụ dành cho nhà phát triển Chrome để đặt các điểm ngắt và khám phá mã của bạn. Cách tiếp cận này thường là cách hiệu quả nhất để tìm và sửa lỗi trong mã của bạn.

Hướng dẫn này chỉ cho bạn cách gỡ lỗi một vấn đề cụ thể, nhưng quy trình làm việc tương tự sẽ hữu ích để gỡ lỗi tất cả các loại lỗi JavaScript.

Bước 1: Tái tạo lỗi

Sao chép một lỗi - bước đầu tiên để gỡ lỗi - có nghĩa là phát hiện một loạt các hành động dẫn đến sự xuất hiện của nó. Bạn có thể cần phải tạo lại lỗi nhiều lần, vì vậy bạn nên loại bỏ bất kỳ bước nào không cần thiết.

Để tạo lại lỗi mà chúng tôi sẽ sửa trong hướng dẫn này, hãy làm theo hướng dẫn bên dưới:

• Đây là trang web mà chúng tôi sẽ làm việc cho bài viết này. Mở nó trong một tab mới: DEMO.
• Demo cho Số 1 nhập 5.
• Nhập 1 cho Số 2.
• Bấm vào Thêm số 1 và số 2.
• Nhìn vào nhãn bên dưới các đầu vào và các nút. Cô ấy nói 5 + 1 = 51.

Giáo sư. Đây là kết quả sai. Kết quả sẽ là 6. Đây là lỗi mà chúng tôi sẽ sửa.

Bước 2: Tạm ngừng thực thi mã bằng điểm ngắt

DevTools cho phép bạn tạm dừng mã của mình ở giữa quá trình thực thi và nhận các giá trị của tất cả tại thời điểm này. Công cụ để tạm dừng mã được gọi là điểm ngắt. Thử ngay bây giờ:

• Quay lại bản trình diễn và mở DevTools bằng cách nhấn Command + Option + I (Mac) hoặc Control + Shift + I (Windows, Linux).
• Đi tới tab Nguồn.
• Bấm vào Điểm ngắt của trình xử lý sự kiệnđể mở rộng menu. DevTools hiển thị danh sách các danh mục sự kiện, chẳng hạn như Hoạt hình và Bảng tạm.
• Mở rộng danh mục sự kiện Chuột.
• Xin hãy lựa chọn nhấp chuột.

• Quay lại bản trình diễn, nhấn lại Thêm số 1 và số 2... DevTools sẽ tạm dừng và đánh dấu dòng mã trong bảng điều khiển Nguồn:

Khi bạn chọn nhấp chuột, bạn đặt điểm ngắt dựa trên tất cả các sự kiện nhấp chuột. Khi có một cú nhấp chuột vào không tí nào và nút này có trình xử lý sự kiện nhấp chuột, DevTools tự động dừng thực thi trên dòng đầu tiên của mã trình xử lý nhấp chuột cho nút này.

Bước 3: Kiểm tra mã

Một trong những nguyên nhân phổ biến của lỗi là tập lệnh đang được thực thi sai thứ tự. Bằng cách kiểm tra mã, bạn có thể thực thi mã từng dòng một và tìm ra chính xác vị trí nó đang được thực thi theo một thứ tự không mong muốn. Thử ngay bây giờ:

• Trên bảng điều khiển Nguồn trong DevTools nhấp vào Bước vào cuộc gọi chức năng tiếp theo.

Nút này cho phép bạn thực thi hàm onClick () từng dòng một. DevTools sẽ ngừng thực thi và đánh dấu dòng mã sau:

If (inputAreEmpty ()) (

• Bây giờ nhấn nút Bước qua cuộc gọi chức năng tiếp theo.

Điều này yêu cầu DevTools thực thi hàm inputAreEmpty () mà không cần truy cập vào nó. Lưu ý rằng DevTools đang bỏ qua một vài dòng mã. Điều này là do inputAreEmpty () đánh giá là false, vì vậy khối lệnh if không được thực thi.

Đây là ý tưởng chính đằng sau nghiên cứu mã. Nếu bạn nhìn vào mã get-started.js, bạn có thể thấy rằng lỗi có thể nằm ở đâu đó trong hàm updateLabel (). Thay vì kiểm tra từng dòng mã, bạn có thể sử dụng một loại điểm ngắt khác để tạm dừng mã của bạn gần lỗi hơn.

Bước 4: Đặt một điểm ngắt khác

Dòng điểm ngắt mã phổ biến nhất là khi bạn có một dòng mã cụ thể mà bạn muốn tạm dừng. Thử ngay bây giờ:

• Hãy xem dòng mã cuối cùng trong updateLabel ():

Ở bên trái của mã, bạn có thể thấy số của dòng cụ thể này: 32 ... Nhấn vào nó. DevTools sẽ đặt một biểu tượng màu xanh lam trên số. Điều này có nghĩa là có một điểm ngắt trên dòng này. DevTools bây giờ sẽ luôn tạm dừng trước nó.

• Nhấn vào nút Tiếp tục thực thi tập lệnh:

Tập lệnh sẽ chạy cho đến khi nó gặp một điểm ngắt.

• Hãy xem các dòng mã đã được thực thi trong updateLabel (). DevTools xuất ra các giá trị của addend1, addend2 và sum.

Giá trị tổng có vẻ đáng ngờ. Có vẻ như nó đang được đánh giá là một chuỗi, nhưng phải là một số. Đây có thể là lý do cho sai lầm của chúng tôi.

Bước 5: Kiểm tra giá trị biến

Một nguyên nhân phổ biến khác của lỗi là một biến hoặc hàm tạo ra các giá trị khác với mong đợi. Nhiều nhà phát triển sử dụng console.log () để xem các giá trị thay đổi như thế nào theo thời gian, nhưng console.log () có thể tẻ nhạt và không hiệu quả vì hai lý do. Trước tiên, bạn có thể cần phải chỉnh sửa mã của mình theo cách thủ công với nhiều lệnh gọi console.log (). Thứ hai, bạn có thể không biết chính xác biến nào có liên quan đến lỗi, vì vậy bạn có thể cần phải cam kết nhiều biến.

Watch Expressions là một giải pháp thay thế từ DevTools cho console.log (). Sử dụng Biểu thức đồng hồ để theo dõi giá trị của các biến theo thời gian. Như tên cho thấy, Biểu thức đồng hồ không chỉ giới hạn ở các biến. Bạn có thể lưu trữ bất kỳ biểu thức JavaScript hợp lệ nào trong Biểu thức Xem. Thử ngay bây giờ:

• Trên bảng điều khiển Nguồn Nhấp chuột DevTools Đồng hồ... Phần sẽ mở rộng.
• Bấm vào Thêm biểu thức.

• Nhập tổng loại.
• Nhấn Enter. DevTools sẽ hiển thị: typeof sum: "string". Giá trị ở bên phải dấu hai chấm là kết quả của Biểu thức đồng hồ của bạn.

Như mong đợi, tổng được đánh giá là một chuỗi, nhưng phải là một số. Đây là lý do cho lỗi của chúng tôi trong bản demo.