Thực đơn
trang chủTiểu sử

Cách gỡ lỗi ứng dụng JavaScript. Tìm hiểu cách gỡ lỗi JavaScript bằng Chrome DevTools. Thông báo lỗi trong IE

NetBeans IDE 7.3 giới thiệu kiểu mới các dự án có thể được sử dụng để phát triển các ứng dụng HTML5. Các ứng dụng HTML5 thường kết hợp HTML, CSS và JavaScript để tạo các ứng dụng chạy trên trình duyệt và được hiển thị trên nhiều thiết bị khác nhau, bao gồm cả điện thoại thông minh, máy tính bảng và máy tính xách tay. Tài liệu này cho thấy cách IDE cung cấp các công cụ có thể được sử dụng trong các tệp gỡ lỗi và kiểm tra tập lệnh JAVA trong IDE.

Nếu bạn cần gỡ lỗi Tệp JavaScript Trong ứng dụng HTML5, bạn nên cài đặt tiện ích mở rộng NetBeans Connector cho trình duyệt Chrome. Hỗ trợ gỡ lỗi được bật tự động khi bạn khởi chạy ứng dụng trong trình duyệt và cài đặt tiện ích mở rộng.

IDE cũng giúp dễ dàng thiết lập và chạy thử nghiệm đơn vị trên các tệp JavaScript bằng cách sử dụng khung thử nghiệm Jasmine và máy chủ Trình điều khiển thử nghiệm JS. Bạn có thể định cấu hình Trình điều khiển kiểm tra JS để chạy mô-đun khác nhau dành cho nhiều trình duyệt khác nhau và nhanh chóng chỉ định các thư viện, tập lệnh và bài kiểm tra JavaScript sẽ được tải vào IDE khi bạn chạy thử nghiệm. Nếu quá trình kiểm tra không thành công, bạn có thể sử dụng trình gỡ lỗi để tìm mã có lỗi.

Để biết thêm thông tin về cách cài đặt tiện ích mở rộng NetBeans Connector cho trình duyệt Chrome, hãy xem khoa Huân luyện.

Để biết tổng quan về các tính năng chỉnh sửa JavaScript của IDE, hãy xem Chỉnh sửa JavaScript trong NetBeans IDE. .

Để xem bản demo của hướng dẫn này, hãy xem Video về Kiểm tra và gỡ lỗi JavaScript trong Ứng dụng HTML5.

Để hoàn thành hướng dẫn này, bạn sẽ cần những tài liệu sau.

Ghi chú

  • Tài liệu này sử dụng máy chủ JS Test Driver để chạy thử nghiệm mô-đun JavaScript. Bạn nên xem lại các thuộc tính máy chủ trong phần Trang chủ Dự án Trình điều khiển Kiểm tra JS.
  • Giả định rằng người đọc có kiến ​​thức hoặc kinh nghiệm cơ bản về lập trình HTML, CSS và JavaScript.

Tạo một ứng dụng HTML5 mẫu

Sản xuất những hành động sauđể tạo một ứng dụng HTML5 mẫu bằng cách sử dụng mẫu trang web.


Khi bạn chạy dự án bằng nút Chạy, trang đầu tiên của ứng dụng HTML5 sẽ mở ra trình duyệt Chrome và một danh sách các điện thoại di động sẽ được hiển thị ở đó. Khi bạn bấm vào một tên điện thoại di động Trang hiển thị thông tin về điện thoại.


Lưu ý rằng tab trình duyệt có thanh màu vàng, đó là thông báo rằng NetBeans Connector đang gỡ lỗi tab. IDE và trình duyệt được kết nối và có thể giao tiếp với nhau trong trường hợp thanh màu vàng hiển thị. Khi chạy ứng dụng HTML5 từ IDE Trình gỡ lỗi JavaScript tự động bật. Sau khi lưu các thay đổi vào một tập tin hoặc thực hiện các thay đổi đối với một bảng Kiểu CSS không cần phải tải lại trang vì cửa sổ trình duyệt sẽ tự động làm mới với những thay đổi.

Đóng thanh màu vàng hoặc nhấp vào Hủy sẽ ngắt kết nối giữa IDE và trình duyệt. Nếu mất kết nối, bạn phải khởi chạy lại ứng dụng HTML5 của mình từ IDE để sử dụng trình gỡ lỗi JavaScript.

Cũng lưu ý rằng biểu tượng NetBeans xuất hiện ở vị trí URL của trường trình duyệt. Bạn có thể nhấp vào biểu tượng để mở menu cung cấp Các tùy chọn khác nhauđể thay đổi kích thước hình ảnh trong trình duyệt và bật chế độ xác thực ở chế độ NetBeans.

Sử dụng Trình gỡ lỗi JavaScript

Bài tập này mô tả cách đặt điểm dừng trong tệp JavaScript và chạy lại ứng dụng. Vì xem lướt qua giá trị của các biến, bạn có thể sử dụng gợi ý của người soạn thảo.

  1. Mở rộng nút js trong cửa sổ Dự án và bấm đúp vào tệp Controllers.js để mở tệp trong trình chỉnh sửa.
  2. Đặt điểm ngắt dòng trên dòng 16 trong Controllers.js bằng cách nhấp vào đường viền bên trái.

    Để xem các điểm dừng được đặt trong dự án của bạn, hãy chọn Cửa sổ > Gỡ lỗi > Điểm dừng để mở cửa sổ Điểm dừng.


  3. Nhấp vào nút Run trên thanh công cụ để chạy lại dự án.

    Khi chạy dự án, trang tương tự sẽ được hiển thị vì chưa đạt được điểm đặt dừng lại.

  4. Trong trình duyệt của bạn, nhấp vào một trong các mục trên trang, ví dụ Motorola Atrix4G.

    Bạn sẽ thấy trang được tải một phần và không có dữ liệu cho điện thoại vì dữ liệu không được chuyển sang JavaScript và được hiển thị.

  5. Trong trình soạn thảo IDE, bạn có thể thấy điểm dừng đã bị tấn công và bộ đếm chương trình hiện nằm ở dòng 16 của tệp Controllers.js.
  6. Di con trỏ qua biến điện thoại để xem chú giải công cụ có thông tin về biến.

    Chú giải công cụ hiển thị các thông tin sau: phone = (Tài nguyên) Tài nguyên .

  7. Nhấp vào chú giải công cụ để mở rộng chú giải và xem danh sách các biến và giá trị.

    Ví dụ: khi mở rộng nút android, các giá trị của chuỗi os và ui được hiển thị.

    Bạn cũng có thể chọn Cửa sổ > Gỡ lỗi > Biến để xem danh sách trong cửa sổ Biến.

  8. Sử dụng các nút trên thanh công cụ để điều hướng giữa Hàm JavaScript trong thư viện Angular.js hoặc nhấp vào Tiếp tục (F5) để tiếp tục ứng dụng.

Chạy thử nghiệm đơn vị JS

IDE giúp dễ dàng thiết lập máy chủ JS Test Driver để chạy thử nghiệm đơn vị. Trong hướng dẫn này, bạn sẽ sử dụng các bài kiểm thử đơn vị JavaScript có trong dự án mẫu và sử dụng khung kiểm thử Jasmine.

JS Test Driver là một máy chủ cung cấp địa chỉ URL, đây là mục tiêu để chạy thử nghiệm đơn vị JavaScript. Khi bạn chạy thử nghiệm, máy chủ sẽ khởi động và chờ chạy thử nghiệm. Một thông báo trạng thái màu xanh lá cây sẽ được hiển thị trong cửa sổ trình duyệt để xác nhận rằng máy chủ đang chạy và ở chế độ chờ. IDE cung cấp hộp thoại cấu hình cho Trình điều khiển kiểm tra JS có thể được mở từ nút Trình điều khiển kiểm tra JS trong Dịch vụ. Hộp thoại cấu hình giúp dễ dàng chỉ định vị trí của JAR máy chủ JS Test Driver và các trình duyệt sẽ chạy trình duyệt đó. Nút Trình điều khiển kiểm tra JS cho phép bạn nhanh chóng xác định xem máy chủ có đang chạy hay không và khởi động hoặc dừng máy chủ.

Để biết thêm thông tin về cách thiết lập máy chủ JS Test Driver, hãy xem tài liệu Bắt đầu với JsTestDriver.

  1. Tải xuống Trình điều khiển kiểm tra JAR JS và lưu tệp JAR trên hệ thống cục bộ của bạn.
  2. Trong cửa sổ Dịch vụ, nhấp chuột phải vào nút Trình điều khiển kiểm tra JS và chọn Cấu hình.
  3. Trong hộp thoại Định cấu hình, nhấp vào Duyệt và tìm tệp JAR Trình điều khiển Kiểm tra JS đã tải xuống.
  4. Chọn Chrome bằng tính năng Trình gỡ lỗi NetBeans JS. Bấm vào đồng ý.

    Ghi chú. Vị trí tập tin JARđối với JS Test Driver bạn chỉ cần chỉ định khi thiết lập JS Test Driver lần đầu tiên.

    Danh sách các trình duyệt có thể thu thập và sử dụng để thử nghiệm trên các trình duyệt được cài đặt trên hệ thống. Bạn có thể chọn nhiều trình duyệt làm trình duyệt bổ sung, nhưng để chạy thử nghiệm, cửa sổ có thể bổ sung cho máy chủ phải mở cho mỗi trình duyệt. Các trình duyệt đã chọn sẽ được ghi lại tự động khi bạn khởi động máy chủ từ IDE.

  5. Bấm chuột phải vào nút dự án trong cửa sổ Dự án và chọn Mới > Khác.
  6. Lựa chọn tập tin cấu hình jsTestDriver trong danh mục "Thử nghiệm mô-đun". Bấm tiếp".
  7. Đảm bảo rằng jsTestDriverđược chỉ định là "Tên tệp".
  8. Trong trường Tệp đã tạo, hãy đảm bảo tệp nằm trong thư mục cấu hình của dự án (AngularJSPhoneCat/config/jsTestDriver.conf).

    Ghi chú. Tệp cấu hình jsTestDriver.conf phải nằm trong thư mục cấu hình của dự án. Nếu vị trí của tệp được tạo không phải là thư mục cấu hình, hãy nhấp vào Duyệt qua và chọn thư mục AngularJSPhoneCat - Tệp cấu hình trong hộp thoại.

  9. Đảm bảo hộp tải thư viện Jasmine được chọn. Nhấp vào nút "Xong".

    Ghi chú.Để chạy jsTestDriver bạn cần tải xuống thư viện Jasmine. Nếu bạn nhận được thông báo rằng IDE không thể tải thư viện Jasmine, hãy kiểm tra cài đặt proxy IDE của bạn trong cửa sổ Tùy chọn.

    Sau khi nhấp vào nút "Xong" IDE sẽ tạo tệp cấu hình lược đồ jsTestDriver.conf và mở tệp trong trình chỉnh sửa. Cửa sổ Dự án hiển thị rằng tệp cấu hình đã được tạo trong nút Tệp Cấu hình. Nếu bạn mở rộng thư mục lib trong nút Unit Tests, bạn sẽ thấy các thư viện Jasmine đã được thêm vào dự án.

    Trong trình chỉnh sửa, bạn có thể xem nội dung sau của tệp cấu hình được tạo theo mặc định:

    Máy chủ: http://localhost:42442 tải: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js loại trừ:

    Tệp cấu hình xác định vị trí mặc định trên Máy chủ cục bộ, được sử dụng để chạy thử nghiệm. Tệp cũng chỉ định các tệp sẽ được tải xuống. Theo mặc định, danh sách bao gồm các thư viện Jasmine và tất cả các tệp JavaScript nằm trong thư mục đơn vị. Các bài kiểm tra thường nằm trong thư mục đơn vị, nhưng bạn có thể thay đổi danh sách để chỉ định vị trí của các tệp khác cần được tải để chạy kiểm tra.

    Thư mục các module của dự án “Khóa đào tạo về danh bạ điện thoại AngularJS" chứa bốn tệp JavaScript với các bài kiểm tra đơn vị.

    Để chạy thử nghiệm đơn vị, bạn cũng có thể thêm vị trí của tệp JavaScript bạn muốn kiểm tra và thư viện Angular JavaScript vào danh sách các tệp đã tải xuống.

  10. Thêm các vị trí sau (được đánh dấu in đậm font) vào phần tải của tệp cấu hình. Lưu các thay đổi của bạn. tải: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js - app/lib/angular/angular.js - app/lib/angular/angular-*.js - app/js/*.js - test/lib/angular/angular-mocks.js
  11. Vô hiệu hóa mọi điểm ngắt được đặt trong dự án.

    Điểm dừng có thể bị vô hiệu hóa bằng cách bỏ chọn hộp kiểm dành cho điểm dừng trong cửa sổ Điểm dừng.

  12. Nhấp vào Test IDE sẽ tự động mở trình khởi chạy JS Test trong trình duyệt Chrome và hai tab trong cửa sổ Đầu ra.


    Thông báo cho biết máy chủ jsTestDriver đang khởi động được hiển thị trong cửa sổ trình duyệt Chrome. Một thông báo được hiển thị cho biết máy chủ đang chạy trên localhost:42442. Tab Máy chủ js-test-driver trong cửa sổ Đầu ra hiển thị trạng thái máy chủ.


    Ghi chú.Để chạy thử nghiệm đơn vị, cửa sổ trình duyệt phải mở và máy chủ jsTestDriver phải đang chạy. Bạn có thể khởi động máy chủ và mở cửa sổ bằng cách nhấp chuột phải vào nút Trình điều khiển kiểm tra JS trong cửa sổ Dịch vụ và chọn Bắt đầu.

    Trên tab Chạy thử nghiệm mô-đun JS, Đầu ra hiển thị kết quả của bốn thử nghiệm đã được chạy. Các bài kiểm tra nằm trong tệp controlSpec.js và filterSpec.js. (Các tệp servicesSpec.js và DirectivesSpec.js không có bài kiểm tra trong thư mục đơn vị.)


  13. Chọn Cửa sổ > Kết quả > Kết quả Kiểm tra từ menu chính để mở cửa sổ Kết quả Kiểm tra.

    Cửa sổ hiển thị thông báo rằng tất cả các thử nghiệm đều thành công.


    Bạn có thể nhấp vào lá cờ xanhở viền bên trái của cửa sổ để xem danh sách mở rộng các bài kiểm tra đã hoàn thành thành công.

Gỡ lỗi các bài kiểm tra đơn vị JS

Bài tập này trình bày cách bạn có thể sử dụng IDE để gỡ lỗi các tệp JavaScript khi kiểm thử đơn vị không thành công.

  1. Mở rộng thư mục js trong cửa sổ Dự án và bấm đúp vào tệp Controllers.js để mở tệp trong trình chỉnh sửa.
  2. Thay đổi dòng 7 trong tệp để thực hiện các thay đổi sau (được đánh dấu in đậm nét chữ). Lưu các thay đổi của bạn. hàm PhoneListCtrl($scope, Phone) ( $scope.phones = Phone.query(); $scope.orderProp = " tên"; }

    Khi lưu thay đổi, trang sẽ tự động được tải lại trong trình duyệt. Hiển thị sự thay đổi thứ tự các điện thoại trong danh sách.

  3. Đảm bảo rằng máy chủ JS Test Driver đang chạy và thông báo trạng thái được hiển thị trong cửa sổ trình duyệt Chrome.
  4. Nhấp chuột phải vào nút dự án trong cửa sổ Dự án và chọn Kiểm tra.

    Khi chạy thử nghiệm, bạn có thể thấy rằng một trong các thử nghiệm có lỗi cho biết đã tìm thấy giá trị "tên" thay vì giá trị mong đợi là "tuổi".

  5. Mở tab "Chạy thử nghiệm đơn vị JS" trong cửa sổ "Đầu ra".

    Một thông báo được hiển thị cho biết orderProp phải ở dòng 41.

  6. Nhấp vào liên kết trong tab Chạy thử nghiệm đơn vị JS để đi đến dòng nơi thử nghiệm không thành công. Tệp kiểm tra ControllersSpec.js mở trong trình chỉnh sửa trên dòng 41 (được đánh dấu in đậm font) it("nên đặt giá trị mặc định của mô hình orderProp", function() ( mong đợi(scope.orderProp).toBe("age"); });

    Bạn có thể thấy rằng thử nghiệm dự kiến ​​"tuổi" là giá trị củascopeOrder.prop .

  7. Đặt điểm dừng ở dòng nơi thử nghiệm không thành công (dòng 41).
  8. Nhấp chuột phải vào nút dự án trong cửa sổ Dự án và chọn Kiểm tra.

    Khi bắt đầu lại quá trình kiểm tra, bộ đếm chương trình sẽ đạt đến điểm dừng. Khi bạn di chuột qua phạm viOrder.prop, chú giải công cụ sẽ hiển thị rằng biến được đặt thành "tên" khi đạt đến điểm ngắt.


    Ngoài ra, bạn có thể chọn Gỡ lỗi > Đánh giá biểu thức từ menu chính để mở cửa sổ Đánh giá mã. Khi bạn nhập biểu thức rangeOrder.prop vào cửa sổ và nhấp vào nút Đánh giá đoạn mã () (Ctrl-Enter), trình gỡ lỗi sẽ hiển thị giá trị của biểu thức trong cửa sổ Biến.

  9. Nhấp vào nút Tiếp tục trên thanh công cụ để hoàn thành bài kiểm tra.

Phần kết luận

Hướng dẫn này trình bày cách IDE cung cấp các công cụ có thể được sử dụng để gỡ lỗi và kiểm tra các mô-đun trong tệp JavaScript. Tính năng gỡ lỗi được bật tự động cho các ứng dụng HTML5 khi bạn chạy ứng dụng đó trong trình duyệt Chrome, miễn là tiện ích mở rộng NetBeans Connector được bật. IDE cũng giúp dễ dàng thiết lập và chạy thử nghiệm đơn vị trên các tệp JavaScript bằng cách sử dụng khung thử nghiệm Jasmine và máy chủ Trình điều khiển thử nghiệm JS.


Xem thêm

Để biết thêm thông tin về việc hỗ trợ các ứng dụng HTML5 trong IDE, hãy xem các tài nguyên sau trên trang web:

  • Bắt đầu với các ứng dụng HTML5. Tài liệu hướng dẫn cách cài đặt tiện ích mở rộng NetBeans Connector cho Chrome cũng như cách tạo và chạy ứng dụng đơn giản HTML5.
  • Làm việc với các trang kiểu CSS trong ứng dụng HTML5 Tài liệu trình bày cách sử dụng một số trình hướng dẫn cửa sổ và CSS trong IDE và chế độ kiểm tra trong trình duyệt Chrome để độ nét trực quan các yếu tố trong nguồn dự án.
  • Thực hiện các thay đổi đối với mã JavaScript. Tài liệu này mô tả các khả năng sửa đổi mã JavaScript cơ bản được cung cấp trong IDE.

Để biết thêm thông tin về cách chạy thử nghiệm đơn vị bằng Trình điều khiển kiểm tra JS, hãy xem tài liệu sau:

  • Trang dự án Trình điều khiển kiểm tra JS: http://code.google.com/p/js-test-driver/
  • Trang chủ Hoa nhài: http://pivotal.github.com/jasmine/
  • Giới thiệu về JsTestDriver. Giới thiệu cách sử dụng JsTestDriver với máy chủ tích hợp liên tục.

Khi tìm ra nguyên nhân lỗi, việc biết công cụ của bạn có thể tạo ra sự khác biệt vai trò quan trọng. Mặc dù JavaScript nổi tiếng là khó gỡ lỗi nhưng nếu biết một vài thủ thuật, bạn sẽ mất ít thời gian hơn để tìm ra nguyên nhân lỗi.

Chúng tôi đã biên soạn danh sách 14 mẹo gỡ lỗi, có thể bạn chưa biết nhưng có thể giúp bạn gỡ lỗi mã JavaScript.

Hầu hết các mẹo này đều dành cho Chrome và Firefox, mặc dù hầu hết chúng đều hoạt động trong các công cụ phát triển dành cho các trình duyệt khác.

1. 'trình gỡ lỗi;'

Sau đó console.log, ‘trình gỡ lỗi;‘ công cụ gỡ lỗi nhanh và bẩn yêu thích của tôi. Sau khi bạn thêm mã đó vào mã của mình, Chrome sẽ tự động dừng thực thi mã tại thời điểm đó. Bạn thậm chí có thể bọc nó trong tình trạng để nó chỉ kích hoạt khi bạn cần.

If (thisThing) (trình gỡ lỗi; )

2. Hiển thị đối tượng dưới dạng bảng

Đôi khi bạn có tập hợp phức tạpđối tượng bạn muốn xem. bạn có thể dùng console.logđể hiển thị chúng, sau đó cuộn qua một danh sách lớn hoặc sử dụng console.table. Điều này làm cho nó dễ dàng hơn nhiều để hiểu những gì bạn đang giải quyết.

Var động vật = [ ( động vật: "Ngựa", tên: "Henry", tuổi: 43 ), ( động vật: "Chó", tên: "Fred", tuổi: 13 ), ( động vật: "Mèo", tên: " Frodo", tuổi: 18 )]; console.table(động vật);

3. Thử xem ở các độ phân giải khác nhau

Sẽ thật tuyệt vời nếu có thiết bị di động, tuy nhiên trong thế giới thựcđiều này là không thể. Làm cách nào để thay đổi kích thước khung nhìn? Chrome cung cấp cho bạn mọi thứ bạn cần. Đi tới Công cụ dành cho nhà phát triển và sau đó nhấp vào nút Chuyển chế độ thiết bị. Xem các biểu hiện truyền thông của bạn trở nên sống động!

4. Tìm kiếm nhanh các phần tử DOM

Chọn phần tử DOM trong Hộp công cụ, sau đó truy cập phần tử đó trong bảng điều khiển. Các công cụ dành cho nhà phát triển của Chrome ghi nhớ năm phần tử cuối cùng: phần tử được chọn cuối cùng $0, phần tử thứ hai đến phần tử được chọn cuối cùng $1, v.v.

Nếu bạn chọn các yếu tố sau theo thứ tự 'item-4', 'item-3', 'item-2', 'item-1', 'item-0', thì bạn có thể truy cập các phần tử DOM như được hiển thị trong bảng điều khiển:

5. Đo thời gian thực thi mã bằng console.time() và console.timeEnd()

Sẽ rất hữu ích khi biết phải mất bao lâu để thực thi một đoạn mã, đặc biệt khi gỡ lỗi các vòng lặp chậm. Bạn có thể đặt nhiều bộ tính giờ được đặt tên. Hãy xem một ví dụ:

Console.time("Timer1"); var mục = ; for(var i = 0; i< 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

Mã này sẽ tạo ra kết quả sau:

6. Lấy dấu vết ngăn xếp cho một hàm

Bạn có thể biết rằng các khung JavaScript chứa rất nhiều mã.

Mã này hiển thị giao diện, kích hoạt các sự kiện, vì vậy cuối cùng bạn sẽ muốn biết nguyên nhân khiến hàm được gọi.

Vì JavaScript không thực sự ngôn ngữ có cấu trúc, đôi khi việc lấy thông tin về điều gì đã xảy ra và khi nào sẽ rất hữu ích. Lúc này anh ấy bước lên sân khấu console.trace.

Hãy tưởng tượng bạn muốn xem toàn bộ ngăn xếp lệnh gọi cho một hàm funcZ trong bản sao xe hơi trên dòng 33.

Xe Var; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX( ); ) var Car = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this .funcZ(); ) this.funcZ = function() ( console.trace('trace car') ) func1(); xe var; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX( ); ) var Car = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this .funcZ(); ) this.funcZ = function() ( console.trace('trace car'); ) ) func1();

Bây giờ chúng ta thấy điều đó func1 nguyên nhân func2, nguyên nhân func4. Func4 tạo một cá thể Xe hơi và sau đó gọi hàm xe.funcX, vân vân.

Ngay cả khi bạn cho rằng mình biết rõ kịch bản thực thi chương trình, điều này có thể rất thuận tiện. Giả sử bạn muốn cải thiện mã của mình. Nhận dấu vết ngăn xếp và danh sách tất cả các hàm liên quan, mỗi hàm đều có thể xem được.

7. Định dạng mã rút gọn

Đôi khi bạn có thể gặp sự cố ngay trong quá trình sản xuất nhưng bản đồ nguồn của bạn không có trên máy chủ. được rồi. Chrome có thể định dạng các tệp JavaScript của bạn để cải thiện chúng hơn định dạng có thể đọc được. Tất nhiên, mã sẽ không có nhiều thông tin như nguồn, nhưng ít nhất bạn có thể hiểu được chuyện gì đang diễn ra trong đó. Nhấn vào nút {} « In đẹp", nằm dưới trình xem mã trong trình kiểm tra.

8. Gỡ lỗi nhanh chóng một chức năng

Giả sử bạn muốn thêm điểm ngắt vào một hàm.

Có hai cách phổ biến nhất để làm điều này:

  1. Tìm dòng mong muốn trong thanh tra và thêm điểm dừng
  2. Thêm trình gỡ lỗi vào tập lệnh của bạn

Cả hai giải pháp này đều yêu cầu tìm kiếm tập tin mong muốn Và dòng mong muốn, mà bạn muốn gỡ lỗi.

Việc sử dụng bảng điều khiển cho mục đích này có lẽ ít phổ biến hơn. Sử dụng gỡ lỗi(funcName) trong bảng điều khiển và tập lệnh sẽ tạm dừng khi đạt đến chức năng mong muốn.

Cái này rất đường tắt tuy nhiên nó không hoạt động trên các chức năng riêng tư và ẩn danh. Nhưng nếu trường hợp của bạn khác thì đây có lẽ là cách nhanh nhất để gỡ lỗi hàm. (Ghi chú của tác giả: có một chức năng console.debug, cái này cần thiết cho cái khác.)

Var func1 = function() ( func2(); ); var Car = function() ( this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this.funcZ(); ) ) var car = new Car();


9. Các tập lệnh không cần gỡ lỗi

10. Tìm những thứ quan trọng bằng kỹ thuật sửa lỗi nâng cao hơn

Các kịch bản gỡ lỗi phức tạp hơn có thể yêu cầu nhiều dòng đầu ra. Một cách để cấu trúc dữ liệu đầu ra là sử dụng các chức năng khác nhau bảng điều khiển. Ví dụ: console.log, console.debug, console.warn, console.info, console.error, v.v. Sau đó bạn có thể lọc chúng trong thanh tra. Nhưng đôi khi đây không hẳn là điều bạn cần khi gỡ lỗi. Bây giờ bạn có thể biểu hiện sáng tạo và tạo các định dạng đầu ra dữ liệu của riêng bạn trong bảng điều khiển bằng CSS.

Console.todo = function(msg) ( console.log(' % c % s % s % s', 'color: yellow; nền - color: black;', '–', msg, '–'); ) console .important = function(msg) ( console.log(' % c % s % s % s', 'color: brown; font - đậm: đậm; văn bản - trang trí: gạch chân;', '–', msg, '– '); ) console.todo(“Đây là thứ cần được sửa”); console.important('Đây là một tin nhắn quan trọng');


11. Theo dõi các lệnh gọi hàm và đối số hàm.

TRONG Bảng điều khiển Chrome, Bạn có thể giám sát một số chức năng nhất định. Mỗi khi một hàm được gọi, nó sẽ được ghi lại cùng với các tham số được truyền cho nó.

Var func1 = function(x, y, z) ( //.... );

Cái này cách tuyệt vời xem hàm được gọi với những đối số nào. Nhưng tôi phải nói rằng sẽ thật tuyệt nếu bảng điều khiển có thể xác định có bao nhiêu đối số sẽ xảy ra. Trong ví dụ trên func1 mong đợi ba đối số, nhưng chỉ có hai đối số được thông qua. Nếu điều này không được xử lý bằng mã, nó có thể dẫn đến lỗi.

12. Truy cập nhanh vào các phần tử trong bảng điều khiển

Cách nhanh hơn để sử dụng querySelector trong bảng điều khiển là sử dụng $. $('css-selector') sẽ trả về phần tử phù hợp đầu tiên và $$('css-selector') sẽ trả về tất cả các phần tử phù hợp. Nếu bạn sử dụng một phần tử nhiều lần, bạn có thể lưu nó vào một biến.

13. Postman rất tuyệt (nhưng Firefox nhanh hơn)

Nhiều nhà phát triển sử dụng Postman để kiểm tra các yêu cầu AJAX.

Đôi khi việc sử dụng trình duyệt cho những mục đích này sẽ dễ dàng hơn.

Khi bạn không còn lo lắng về cookie đăng nhập nếu bạn đang làm việc trên trang được bảo vệ bằng mật khẩu. Đây là cách bạn có thể chỉnh sửa và gửi lại yêu cầu trong Firefox.

Mở trình kiểm tra và chuyển đến tab Mạng. Nhấp chuột phải vào yêu cầu bạn quan tâm, sau đó chọn “Chỉnh sửa” và “Gửi lại”. Bây giờ bạn có thể thay đổi bất cứ điều gì: sửa tiêu đề, chỉnh sửa các thông số và nhấp vào “Gửi lại”.

Dưới đây tôi đã đưa ra một ví dụ về một yêu cầu được gửi nhiều lần với các thông số khác nhau:

14. Điểm dừng khi phần tử DOM thay đổi

DOM có thể buồn cười. Đôi khi, các yếu tố trong đó thay đổi mà bạn không biết vì lý do gì. Tuy nhiên, khi bạn cần gỡ lỗi JavaScript, Chrome cho phép bạn tạm dừng thực thi mã khi thành phần DOM thay đổi. Nhấp chuột phải vào phần tử quan tâm trong trình kiểm tra và chọn điều kiện để dừng thực thi.

Bài viết này sẽ hữu ích các nhà phát triển web những người đang bắt đầu làm quen với JavaScript và làm quen với các công cụ phát triển được tích hợp trong trình duyệt. Khả năng “gỡ lỗi” một ứng dụng JavaScript rất quan trọng đối với nhà phát triển web, vì nó cho phép bạn nhanh chóng tìm ra nguyên nhân gây ra lỗi trong tập lệnh.

Gỡ lỗi trong Google Chrome

Gỡ lỗi ứng dụng- quá trình phát hiện, bản địa hóa và loại bỏ lỗi bằng cách sử dụng trình gỡ lỗi (một công cụ được tích hợp trong môi trường phát triển hoặc phần mềm khác). Khi gỡ lỗi, nhà phát triển có thể tìm hiểu giá trị của các biến và tiến trình của chương trình.

Trong tất cả các trình duyệt hiện đại Có những công cụ cho phép nhà phát triển phân tích hoạt động của ứng dụng web, bao gồm cả việc gỡ lỗi mã JavaScript. Để mở các công cụ dành cho nhà phát triển web, hầu hết các trình duyệt đều sử dụng phím F12. Bài viết này sẽ thảo luận Gỡ lỗi JavaScript các ứng dụng sử dụng ví dụ về công cụ Web Inspector trong trình duyệt Google Trình duyệt Chrome.

Dưới đây là mã HTML của trang có tập lệnh đơn giản sẽ được phân tích cú pháp bằng sử dụng Web Thanh tra.

< div nhận dạng="myDiv"> div>

< kịch bản>

Var div = document.getElementById("mydiv");

varvăn bản ="" ;

vì ( vartôi = 0; Tôi< 10; i++)

Văn bản += tôi +" " ;

Div.innerHTML = văn bản;

< kịch bản>

Mục tiêu của tập lệnh này là tạo một chuỗi số từ 0 đến 9 và hiển thị chúng dưới dạng phần tử div Trên trang. Nhưng mã không hoạt động và chúng tôi sẽ cố gắng tìm ra vấn đề bằng cách gỡ lỗi.

Khởi chạy Web Inspector và chuyển sang cửa sổ trình gỡ lỗi.

Bằng cách nhấn phím F12, chúng ta sẽ nhận được cửa sổ sau trong Google Chrome.

Đảm bảo rằng mục menu Nguồn được chọn để cho phép bạn gỡ lỗi.

Cửa sổ gỡ lỗi được chia thành ba bảng (được đánh dấu bằng số trong hình):

1 - Bảng các tập tin được kết nối với trang hiện tại, có chứa mã JavaScript.

2 - Bảng trong đó mã JavaScript của tệp đã chọn sẽ được hiển thị.

3 - Bảng điều khiển có cài đặt thêm, đơn giản hóa việc gỡ lỗi.

Đặt điểm dừng hoặc điểm dừng

Để bắt đầu gỡ lỗi ứng dụng, bạn cần xác định xem quá trình thực thi tập lệnh sẽ dừng ở giai đoạn nào. Để thực hiện việc này, giống như hầu hết các công cụ gỡ lỗi khác, bạn cần đặt điểm dừng hoặc điểm dừng.

Điểm dừng) - một dấu hiệu cho trình gỡ lỗi biết thời điểm tạm dừng trong quá trình thực thi ứng dụng.

Trước tiên, bạn cần chọn tệp sẽ thực hiện gỡ lỗi JavaScript (để thực hiện việc này, hãy nhấp đúp vào tệp index.html)

Sau đó, đặt điểm dừng bằng cách nhấp vào số dòng trong bảng điều khiển trung tâm, màn hình này sẽ hiển thị mã của tệp đã chọn. Điểm dừng được hiển thị dưới dạng hình chữ nhật màu xanh. Bây giờ, nếu bạn làm mới trang, tập lệnh sẽ chạy đến dòng 9 và dừng lại. Tiếp theo, chúng ta có thể gỡ lỗi ứng dụng từng bước và theo dõi giá trị của các biến trong tập lệnh.

Một trong những ưu điểm của trình gỡ lỗi là hiển thị các lỗi do trình thông dịch đưa ra. Trên dòng 14, thông báo được hiển thị - Uncaught TypeError: Không thể đặt thuộc tính 'innerHTML' thành null. Bài đăng này có thể đã giúp giải quyết vấn đề về tập lệnh. Tập lệnh cố gắng truy cập một thuộc tính trên biến div - thông báo cho biết biến này là null và các giá trị thuộc tính không thể được đặt thành null. Nếu biến chứa null thì bạn cần tìm mã ghi giá trị cho biến.

Gỡ lỗi JavaScript từng bước

Sau khi cài đặt điểm dừng, bạn cần bắt đầu gỡ lỗi. Để làm điều này, chỉ cần làm mới trang (F5). Nếu có điểm dừng, tập lệnh sẽ dừng ở dòng số 9 (điều này được biểu thị bằng phần tô sáng màu xanh lam của dòng).

Thỉnh thoảng, các nhà phát triển mắc lỗi mã hóa. Một lỗi trong chương trình hoặc tập lệnh được gọi là lỗi.

Quá trình tìm và sửa lỗi được gọi là gỡ lỗi và là một phần bình thường của quá trình phát triển. Phần này thảo luận về các công cụ và kỹ thuật có thể giúp bạn gỡ lỗi các tác vụ.

Thông báo lỗi trong IE

Cách dễ nhất để theo dõi lỗi là bật báo cáo lỗi trong trình duyệt của bạn. Mặc định trình duyệt web IE hiển thị biểu tượng lỗi trên thanh trạng thái khi xảy ra lỗi trên trang.

Nhấp đúp vào biểu tượng này sẽ đưa bạn đến hộp thoại hiển thị thông tin về lỗi cụ thể.

Vì biểu tượng này có thể dễ dàng bị bỏ qua nên Internet Explorer cung cấp cho bạn tùy chọn tự động hiển thị hộp thoại Lỗi mỗi khi xảy ra lỗi.

Để bật tùy chọn này, chọn Công cụ → Tùy chọn Internet → tab Nâng cao. và cuối cùng chọn hộp kiểm "Hiển thị thông báo trên mọi tập lệnh" như hiển thị bên dưới -

Thông báo lỗi trong Firefox hoặc Mozilla

Các trình duyệt khác, chẳng hạn như Firefox, Netscape và Mozilla, gửi thông báo lỗi tới một cửa sổ đặc biệt có tên là Bảng điều khiển JavaScript hoặc Bảng điều khiển lỗi. Để xem bảng điều khiển, chọn Công cụ → Bảng điều khiển lỗi hoặc Phát triển web.

Thật không may, vì những trình duyệt này không cung cấp thông tin trực quan khi xảy ra lỗi, bạn nên mở bảng điều khiển và theo dõi lỗi khi tập lệnh của bạn chạy.

Thông báo lỗi

Thông báo lỗi hiển thị trong bảng điều khiển hoặc qua những hộp thoại Lỗi Internet Explorer là kết quả của cả lỗi cú pháp và lỗi thời gian chạy. Các thông báo lỗi này bao gồm số dòng xảy ra lỗi.

Nếu bạn đang sử dụng Firefox, bạn có thể nhấp vào lỗi có sẵn trong bảng điều khiển lỗi để đi đến dòng chính xác trong kịch bản có lỗi.

Cách gỡ lỗi tập lệnh

Hiện hữu nhiều cách khác nhau gỡ lỗi JavaScript của bạn - Sử dụng Trình xác thực JavaScript

Một cách để kiểm tra Mã JavaScriptđối với các lỗi kỳ lạ, hãy chạy nó thông qua một chương trình để kiểm tra nó để đảm bảo nó hợp lệ và tuân theo các quy tắc cú pháp chính thức của ngôn ngữ. Các chương trình này được gọi là trình phân tích cú pháp hoặc gọi tắt là trình xác thực và thường đi kèm với các phiên bản thương mại. Trình soạn thảo HTML và JavaScript.

Trình xác nhận thuận tiện nhất cho JavaScript là JavaScript Lint của Douglas Crockford, có sẵn miễn phí trong JavaScript Lint của Douglas Crockford.

Chỉ cần truy cập trang web này, dán mã JavaScript (chỉ JavaScript) vào vùng văn bản được cung cấp và nhấp vào nút jslint. Chương trình này sẽ phân tích mã JavaScript của bạn, đảm bảo rằng tất cả các định nghĩa biến và hàm đều tuân theo cú pháp đúng. Anh ấy cũng sẽ kiểm tra Hướng dẫn JavaScript, chẳng hạn như if và while, để chúng cũng tuân theo đúng định dạng

Thêm mã gỡ lỗi vào chương trình của bạn

Bạn có thể sử dụng các phương thức notification() hoặc document.write() trong chương trình để gỡ lỗi mã của mình. Ví dụ: bạn có thể viết một cái gì đó như thế này:

gỡ lỗi var = true; var whichImage = "widget"; if(debugging) notification("Gọi swapImage() với đối số: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) notification("Thoát swapImage() bằng swapStatus=" + swapStatus);

Bằng cách kiểm tra nội dung và thứ tự của cảnh báo() khi chúng xuất hiện, bạn có thể dễ dàng kiểm tra chức năng của chương trình.

Cách sử dụng trình gỡ lỗi JavaScript

Trình gỡ lỗi là một ứng dụng trong đó tất cả các khía cạnh thực thi tập lệnh đều nằm dưới sự kiểm soát của lập trình viên. Trình gỡ lỗi cung cấp khả năng kiểm soát chi tiết đối với trạng thái của tập lệnh thông qua giao diện cho phép bạn kiểm tra và đặt giá trị cũng như kiểm soát luồng thực thi.

Khi tập lệnh được tải vào trình gỡ lỗi, nó có thể chạy từng dòng một hoặc được hướng dẫn dừng ở một số dòng nhất định. Điểm kiểm soát. Khi dừng thực thi, lập trình viên có thể kiểm tra trạng thái của tập lệnh và các biến của nó để xác định xem có điều gì sai không. Bạn cũng có thể xem các biến để thay đổi giá trị của chúng.

  • Sử dụng rất nhiều ý kiến. Nhận xét cho phép bạn giải thích lý do tại sao bạn viết tập lệnh theo cách bạn đã làm và giải thích các phần mã đặc biệt khó.
  • Luôn sử dụng thụt lề để làm cho mã của bạn dễ đọc. Việc thụt lề cũng giúp bạn dễ dàng khớp thẻ bắt đầu và kết thúc, dấu ngoặc nhọn và các thẻ khác. phần tử HTML và kịch bản.
  • Viết mã mô-đun. Bất cứ khi nào có thể, hãy nhóm các câu lệnh của bạn thành các hàm. Các hàm cho phép bạn nhóm các câu lệnh liên quan cũng như kiểm tra và sử dụng lại các đoạn mã mà không tốn nhiều công sức.
  • Hãy nhất quán trong cách bạn đặt tên cho các biến và hàm của mình. Cố gắng sử dụng tên đủ dài để có ý nghĩa và mô tả nội dung của biến hoặc mục đích của hàm.
  • Sử dụng cú pháp nhất quán khi đặt tên biến và hàm. Nói cách khác, hãy giữ chúng bằng chữ thường hoặc chữ hoa; nếu bạn thích ký hiệu Camel-Back, hãy sử dụng nó một cách nhất quán.
  • Kiểm tra các tập lệnh dài theo cách mô-đun. Nói cách khác, đừng cố viết toàn bộ tập lệnh trước khi kiểm tra bất kỳ phần nào của nó. Viết phần này và chạy nó trước khi thêm phần tiếp theo của mã.
  • Sử dụng tên mô tả cho các biến và hàm và tránh sử dụng tên có một ký tự.
  • Hãy chú ý đến các trích dẫn. Hãy nhớ rằng dấu ngoặc kép được sử dụng theo cặp xung quanh chuỗi và cả hai dấu ngoặc kép phải có cùng kiểu (một hoặc hai).
  • Theo dõi các dấu bằng của bạn. Bạn không nên sử dụng one = cho mục đích so sánh.
  • Tôi khai báo rõ ràng các biến bằng cách sử dụng từ khóa var.

Firebug chứa trình gỡ lỗi AvaScript mạnh mẽ cung cấp cho bạn khả năng tạm dừng thực thi bất kỳ lúc nào và xem mọi biến tại thời điểm đó. Nếu mã của bạn chậm, hãy sử dụng trình lược tả JavaScript để đo hiệu suất và nhanh chóng tìm ra các điểm nghẽn.

Tìm tập lệnh một cách dễ dàng

Nhiều ứng dụng web bao gồm số lượng lớn các tệp và việc tìm tệp để gỡ lỗi có thể là một công việc thường ngày và nhàm chán. Menu chọn tập lệnh của Firebug sắp xếp và sắp xếp các tệp thành một danh sách rõ ràng, dễ hiểu giúp bạn tìm thấy bất kỳ tệp nào chỉ bằng một cú nhấp chuột.

Tạm dừng thực hiện ở bất kỳ dòng nào

Firebug cho phép bạn đặt các điểm ngắt, thông báo cho trình gỡ lỗi ngừng thực thi tập lệnh khi nó đạt đến chuỗi cụ thể. Trong khi quá trình thực thi bị tạm dừng, bạn có thể xem giá trị của bất kỳ biến nào và kiểm tra đối tượng.

Để đặt điểm dừng, hãy nhấp vào bất kỳ số dòng nào và dấu chấm màu đỏ sẽ xuất hiện ở đó, cho biết điểm dừng đã được đặt. Nhấp vào dấu chấm màu đỏ một lần nữa để xóa điểm ngắt.

Chỉ tạm dừng thực hiện nếu...

Điểm dừng có thể gây ra vấn đề nếu được kích hoạt quá thường xuyên. Đôi khi chúng ta chỉ muốn tạm dừng thực thi khi đáp ứng được một số điều kiện nhất định. Firebug cho phép bạn đặt điểm dừng "có điều kiện". Họ kiểm tra một biểu thức phải đúng để điểm dừng hoạt động.

Để đặt điểm dừng có điều kiện, chỉ cần nhấp chuột phải vào bất kỳ số dòng nào. Một bong bóng sẽ xuất hiện nhắc bạn nhập biểu thức javascript. Bạn có thể nhấp chuột phải lần nữa bất kỳ lúc nào để thay đổi biểu thức hoặc nhấp chuột trái để thoát khỏi điểm ngắt.

Một bước tại một thời điểm

Khi trình gỡ lỗi đã tạm dừng thực thi, bạn có thể tiếp tục tập lệnh từng bước một. Điều này cho phép bạn thấy rõ việc thực thi một dòng cụ thể ảnh hưởng như thế nào đến các biến và đối tượng.

Bạn cũng có thể tiếp tục thực hiện trên nhiều dòng. Chọn vào danh mục dòng mong muốn "Chạy đến dòng này" để tiếp tục thực hiện dòng này.

Tôi bị gián đoạn khi mắc lỗi

Không phải lúc nào bạn cũng chọn trình gỡ lỗi... Đôi khi trình gỡ lỗi chọn bạn. Firebug cung cấp cho bạn khả năng tự động chuyển sang trình gỡ lỗi khi xảy ra lỗi, do đó bạn có thể điều tra các điều kiện xảy ra sự cố.

Chồng chưa mở

Khi trình gỡ lỗi tạm dừng, Firebug hiển thị cho bạn ngăn xếp cuộc gọi, là tập hợp các lệnh gọi hàm lồng nhau hiện đang chạy và chờ quay lại.

Ngăn xếp cuộc gọi được thể hiện bằng một dải nút nhỏ gọn trong bảng điều khiển, mỗi nút có tên của một chức năng trên ngăn xếp. Bạn có thể nhấp vào bất kỳ nút nào để chuyển đến dòng nơi hàm bị tạm dừng và xem giá trị của các biến cục bộ từ bên trong hàm.

Xem biểu hiện

Khi gỡ lỗi, bạn thường muốn xem ý nghĩa của các biểu thức hoặc đối tượng phức tạp được chôn trong DOM. Firebug cho phép bạn in một biểu thức javascript tùy ý, giá trị của nó sẽ được cập nhật ở mỗi bước gỡ lỗi.

Khi gõ biểu thức, hãy nhớ rằng bạn có thể sử dụng Phím Tabđể tự động hoàn thành các thuộc tính đối tượng.

Gợi ý biến

Trong khi quá trình thực thi bị tạm dừng, bạn có thể di chuyển chuột qua bất kỳ biến nào chức năng hiện tại bằng cách xem chú giải công cụ với các giá trị. Đây là một cách tuyệt vời để bạn chú ý đến mã và nhận được câu trả lời trong khi đọc.

Hiệu suất JavaScript hồ sơ

Ứng dụng web của bạn gần như hoàn hảo. Bạn đã khắc phục được tất cả các lỗi, xong Thiết kế thời trang và người dùng yêu thích nó. Chỉ có một vấn đề - một số tính năng chậm và bạn không hiểu tại sao...

Với Firebug, bạn không còn phải thắc mắc tại sao mã của mình chạy chậm nữa. Bằng cách sử dụng trình phân tích Firebug, bạn có thể tách ruồi ra khỏi thịt cốt lết chỉ trong vài giây.

Để sử dụng trình lược tả, chỉ cần chuyển đến tab Bảng điều khiển và nhấp vào nút "Hồ sơ". Sau đó, sử dụng ứng dụng của bạn một lúc hoặc tải lại trang và nhấp lại vào "Hồ sơ". Bạn sẽ thấy báo cáo chi tiết cho biết chức năng nào đã được gọi và thời gian thực hiện của mỗi chức năng.

Ghi nhật ký cuộc gọi chức năng

Đôi khi hàm có vấn đề được gọi nhiều lần đến mức bạn không thể vào trình gỡ lỗi mỗi lần. Bạn chỉ muốn biết khi nào nó được gọi và với những thông số gì.

Để theo dõi tất cả các lệnh gọi hàm, chỉ cần nhấp chuột phải vào tab Tập lệnh và chọn "Ghi nhật ký cuộc gọi đến" tên hàm "". Sau đó vào bảng điều khiển và xem các cuộc gọi xuất hiện trong nhật ký...

Đi thẳng đến dòng 108

Thường thì bạn muốn đi đến dòng mong muốn trong kịch bản một cách rõ ràng. Không có gì dễ dàng hơn, chỉ cần gõ số dòng vào cửa sổ tìm kiếm nhanh, đặt # đầu tiên, như minh họa trong ảnh chụp màn hình bên trái.