Tìm hiểu cách sử dụng Công cụ dành cho nhà phát triển của Chrome để tìm và sửa lỗi JavaScript.

Bạn đang xem : cách gỡ lỗi mã javascript

Hướng dẫn này dạy bạn quy trình làm việc cơ bản để gỡ lỗi bất kỳ vấn đề JavaScript nào trong DevTools. Đọc tiếp hoặc xem phiên bản video của hướng dẫn này bên dưới.

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

Tìm một loạt các hành động tái tạo một cách nhất quán lỗi luôn là bước đầu tiên để gỡ lỗi.

  1. Nhấp vào Mở bản trình diễn . Bản trình diễn mở trong một tab mới.

    Mở bản trình diễn

  2. Nhập 5 trong hộp văn bản Số 1 .

  3. Nhập 1 vào Số 2 hộp văn bản.

  4. Nhấp vào Thêm Số 1 và Số 2 . Nhãn bên dưới nút có nội dung 5 + 1 = 51 . Kết quả phải là 6 . Đây là lỗi bạn sắp sửa.

    Hình 1 . Kết quả của 5 + 1 là 51. Nó phải là 6.

# Bước 2: Làm quen với giao diện người dùng của bảng điều khiển Nguồn

DevTools cung cấp rất nhiều công cụ khác nhau cho các tác vụ khác nhau, chẳng hạn như thay đổi CSS, lập hồ sơ hiệu suất tải trang và giám sát các yêu cầu mạng. Bảng điều khiển Nguồn là nơi bạn gỡ lỗi JavaScript.

  1. Mở DevTools bằng cách nhấn Command + Option + I (Mac) hoặc Control + Shift + I (Windows, Linux). Phím tắt này sẽ mở ra bảng điều khiển Console .

    Hình 2 . Bảng điều khiển Bảng điều khiển

  2. Nhấp vào tab Nguồn .

    Hình 3 . Bảng điều khiển Nguồn

Giao diện người dùng bảng Nguồn có 3 phần:

Hình 4 . 3 phần của giao diện người dùng bảng Nguồn

  1. Ngăn Trình điều hướng tệp . Mọi tệp mà trang yêu cầu đều được liệt kê ở đây.
  2. Ngăn Trình chỉnh sửa mã . Sau khi chọn tệp trong ngăn Trình điều hướng tệp , nội dung của tệp đó được hiển thị ở đây.
  3. Ngăn Gỡ lỗi JavaScript . Các công cụ khác nhau để kiểm tra JavaScript của trang. Nếu cửa sổ DevTools của bạn rộng, ngăn này sẽ hiển thị ở bên phải của ngăn Trình chỉnh sửa mã .

# Bước 3: Tạm dừng mã có điểm ngắt

Phương pháp phổ biến để gỡ lỗi một vấn đề như thế này là chèn nhiều câu lệnh console.log () vào mã, để kiểm tra các giá trị khi tập lệnh thực thi. Ví dụ:

  

function

updateLabel

(

)

{


var

addend1

=

getNumber1

(

)

;


console

.

nhật ký

(

'addend1:'

,

addend1

)

;


var

addend2

=

getNumber2

(

)

;


bảng điều khiển

.

nhật ký

(

'addend2:'

< p class = "dấu chấm câu">,

addend2

)

;


var

sum

=

addend1

+

addend2

;


bảng điều khiển

.

nhật ký

(

'sum:'

,

sum

)

;


nhãn

.

textContent

=

addend1

+

'+'

+

addend2

+

'='

+

sum

;

}

Phương thức console.log () có thể hoàn thành công việc nhưng breakpoints có thể hoàn thành công việc nhanh hơn. Điểm ngắt cho phép bạn tạm dừng mã của mình ở giữa quá trình thực thi và kiểm tra tất cả các giá trị tại thời điểm đó. Các điểm ngắt có một số ưu điểm so với phương thức console.log () :

  • Với console.log () , bạn cần mở theo cách thủ công mã nguồn, tìm mã có liên quan, chèn các câu lệnh console.log () , rồi tải lại trang để xem thông báo trong Bảng điều khiển. Với các điểm ngắt, bạn có thể tạm dừng trên mã có liên quan mà không cần biết mã được cấu trúc như thế nào.
  • Trong câu lệnh console.log () , bạn cần chỉ định rõ ràng từng giá trị mà bạn muốn kiểm tra. Với các điểm ngắt, DevTools hiển thị cho bạn giá trị của tất cả các biến tại thời điểm đó. Đôi khi, có những biến ảnh hưởng đến mã của bạn mà bạn thậm chí không biết.

Tóm lại, các điểm ngắt có thể giúp bạn tìm và sửa lỗi nhanh hơn so với console.log () < / code> method.

Nếu bạn lùi lại một bước và nghĩ về cách hoạt động của ứng dụng, bạn có thể đưa ra phỏng đoán thông minh rằng tổng không chính xác ( 5 + 1 = 51 ) được tính toán trong trình xử lý sự kiện click được liên kết với nút Thêm Số 1 và Số 2 . Do đó, bạn có thể muốn tạm dừng mã trong khoảng thời gian mà trình nghe click thực thi. Điểm ngắt của trình xử lý sự kiện cho phép bạn thực hiện chính xác điều đó:

  1. Trong ngăn Gỡ lỗi JavaScript , nhấp vào Điểm ngắt của trình xử lý sự kiện < / strong> để mở rộng phần. DevTools hiển thị danh sách các danh mục sự kiện có thể mở rộng, chẳng hạn như Hoạt ảnh Bảng tạm .

  2. Bên cạnh Chuột danh mục sự kiện, nhấp vào Mở rộng . DevTools hiển thị danh sách các sự kiện chuột, chẳng hạn như nhấp chuột chuyển xuống . Mỗi sự kiện có một hộp kiểm bên cạnh.

  3. Chọn hộp kiểm nhấp . DevTools hiện được thiết lập để tự động tạm dừng khi bất kỳ trình xử lý sự kiện nhấp nào thực thi.

    Hình 5 . Hộp kiểm nhấp chuột được bật

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

      

    function

    onClick

    (

    )

    {

    Nếu bạn bị tạm dừng trên một dòng mã khác, hãy nhấn Tiếp tục thực thi tập lệnh cho đến khi bạn bị tạm dừng ở đúng dòng.

    Lưu ý : Nếu bạn tạm dừng trên một dòng khác, bạn có một tiện ích mở rộng trình duyệt đăng ký trình xử lý sự kiện nhấp trên mỗi trang bạn truy cập. Bạn đã bị tạm dừng trong trình nghe lần nhấp của tiện ích mở rộng. Nếu bạn sử dụng Chế độ ẩn danh để duyệt web ở chế độ riêng tư , chế độ này sẽ tắt tất cả các tiện ích mở rộng, bạn có thể thấy rằng mình luôn tạm dừng trên đúng dòng mã.

< p> Điểm ngắt của trình xử lý sự kiện chỉ là một trong nhiều loại điểm ngắt có sẵn trong DevTools. Bạn nên ghi nhớ tất cả các kiểu khác nhau, vì cuối cùng mỗi kiểu sẽ giúp bạn gỡ lỗi các tình huống khác nhau nhanh nhất có thể. Xem phần Tạm dừng mã của bạn có điểm ngắt để tìm hiểu thời điểm và cách sử dụng từng loại.

# Bước 4: Xem qua mã

Một nguyên nhân phổ biến gây ra lỗi là khi tập lệnh thực thi sai thứ tự. Bước qua mã của bạn cho phép bạn xem qua quá trình thực thi mã của mình, từng dòng một và tìm ra chính xác nơi mã đang thực thi theo một thứ tự khác với bạn mong đợi. Hãy thử ngay bây giờ:

  1. Trên bảng điều khiển Nguồn của DevTools, nhấp vào Bước sang lệnh gọi hàm tiếp theo để thực hiện hàm onClick () , một dòng tại một thời điểm. DevTools đánh dấu dòng mã sau:

      

    if

    (

    inputAreEmpty

    (

    )

    )

    {

  2. Nhấp vào < strong> Bước qua cuộc gọi chức năng tiếp theo . DevTools thực thi inputAreEmpty () mà không cần bước vào nó. Lưu ý cách DevTools bỏ qua một vài dòng mã. Điều này là do inputAreEmpty () được đánh giá là false, vì vậy khối mã của câu lệnh if không thực thi.

Đó là ý tưởng cơ bản về bước qua mã. Nếu bạn nhìn vào mã trong get-started.js, bạn có thể thấy rằng lỗi có thể nằm ở đâu đó trong hàm updateLabel () . Thay vì lướt qua 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ã gần vị trí có thể xảy ra lỗi hơn.

< span class = "header-link"> # Bước 5: Đặt điểm ngắt dòng mã

Điểm ngắt dòng mã là loại điểm ngắt phổ biến nhất. Khi bạn có một dòng mã cụ thể mà bạn muốn tạm dừng, hãy sử dụng điểm ngắt dòng mã:

  1. Xem dòng mã cuối cùng trong updateLabel () :

      label 

    .

    textContent

    =

    addend1

    +

    '+'

    +

    addend2

    +

    '='

    + sum

    ;

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

  3. Nhấp vào Tiếp tục thực thi tập lệnh . Tập lệnh tiếp tục thực thi cho đến khi đến dòng 32. Trên các dòng 29, 30 và 31, DevTools in ra các giá trị của addend1 , addend2 sum ở bên phải dấu chấm phẩy của mỗi dòng.

    Hình 6 . DevTools tạm dừng ở điểm ngắt dòng mã trên dòng 32

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

Các giá trị của addend1 , addend2 sum xem khả nghi. Chúng được bao bọc trong dấu ngoặc kép, có nghĩa là chúng là chuỗi. Đây là một giả thuyết tốt cho việc giải thích nguyên nhân của lỗi. Bây giờ là lúc để thu thập thêm thông tin. DevTools cung cấp rất nhiều công cụ để kiểm tra các giá trị biến.

# Phương pháp 1: Ngăn Phạm vi

Khi bạn bị tạm dừng trên một dòng mã, ngăn Phạm vi hiển thị cho bạn những biến cục bộ và toàn cục hiện đang được xác định, cùng với giá trị của mỗi biến. Nó cũng hiển thị các biến đóng, khi có thể. Bấm đúp vào một giá trị biến để chỉnh sửa nó. Khi bạn không bị tạm dừng trên một dòng mã, ngăn Phạm vi sẽ trống.

Hình 7 . Ngăn Phạm vi

# Phương pháp 2: Biểu thức Xem

Tab Biểu thức xem cho phép bạn theo dõi giá trị của các biến theo thời gian. Như tên của nó, 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. Hãy thử ngay bây giờ:

  1. Nhấp vào tab Xem .

  2. Nhấp vào Thêm biểu thức < / strong>.

  3. Nhập typeof sum .

  4. Nhấn Enter. DevTools 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 xem của bạn.

    Hình 8 . Ngăn Biểu thức Xem (dưới cùng bên phải), sau khi tạo typeof sum Biểu thức Xem. Nếu cửa sổ DevTools của bạn lớn, ngăn Biểu thức xem ở bên phải, phía trên ngăn Điểm ngắt của trình xử lý sự kiện .

Như nghi ngờ, sum đang được đánh giá là một chuỗi, khi nó phải là một số. Hiện bạn đã xác nhận rằng đây là nguyên nhân gây ra lỗi.

# Phương pháp 3: Bảng điều khiển

Ngoài việc xem các thông báo console.log () , bạn cũng có thể sử dụng Bảng điều khiển để đánh giá các câu lệnh JavaScript tùy ý. Về mặt gỡ lỗi, bạn có thể sử dụng Bảng điều khiển để kiểm tra các bản sửa lỗi tiềm năng. Hãy thử ngay bây giờ:

  1. Nếu bạn không mở ngăn Bảng điều khiển, hãy nhấn Escape để mở. Nó mở ra ở cuối cửa sổ DevTools của bạn.

  2. Trong Bảng điều khiển, nhập parseInt (addend1) + parseInt (addend2) . Câu lệnh này hoạt động vì bạn bị tạm dừng trên một dòng mã có phạm vi addend1 addend2 .

  3. Nhấn Enter . DevTools đánh giá câu lệnh và in ra 6 , đây là kết quả mà bạn mong đợi bản trình diễn tạo ra.

    Hình 9 . Ngăn điều khiển, sau khi đánh giá parseInt (addend1) + parseInt (addend2) .

# Bước 7: Áp dụng bản sửa lỗi

Bạn đã tìm thấy bản sửa lỗi cho lỗi này. Tất cả những gì còn lại là thử bản sửa lỗi của bạn bằng cách chỉnh sửa mã và chạy lại bản trình diễn. Bạn không cần rời khỏi DevTools để áp dụng bản sửa lỗi. Bạn có thể chỉnh sửa mã JavaScript trực tiếp trong giao diện người dùng DevTools. Hãy thử ngay bây giờ:

  1. Nhấp vào Tiếp tục thực thi tập lệnh .
  2. Trong Trình chỉnh sửa mã , thay thế dòng 31, < code> var sum = addend1 + addend2 , với var sum = parseInt (addend1) + parseInt (addend2) .
  3. Nhấn Command + S (Mac) hoặc Control + S (Windows, Linux) để lưu thay đổi của bạn.
  4. Nhấp vào Hủy kích hoạt các điểm ngắt . Nó thay đổi màu xanh lam để cho biết rằng nó đang hoạt động. Trong khi điều này được thiết lập, DevTools sẽ bỏ qua bất kỳ điểm ngắt nào bạn đã đặt.
  5. Hãy dùng thử bản trình diễn với các giá trị khác nhau. Bản demo hiện đã tính toán chính xác.

Thận trọng

Thận trọng: Dòng công việc này chỉ áp dụng một bản sửa lỗi cho mã đang chạy trong trình duyệt của bạn. Nó sẽ không sửa mã cho tất cả người dùng truy cập trang của bạn. Để làm điều đó, bạn cần sửa mã trên máy chủ của mình.

# Các bước tiếp theo

Xin chúc mừng! Giờ bạn đã biết cách tận dụng tối đa Công cụ dành cho nhà phát triển của Chrome khi gỡ lỗi JavaScript. Các công cụ và phương pháp bạn học được trong hướng dẫn này có thể giúp bạn tiết kiệm vô số giờ.

Hướng dẫn này chỉ cho bạn thấy hai cách để thiết lập các điểm ngắt. DevTools cung cấp nhiều cách khác, bao gồm:

  • Các điểm ngắt có điều kiện chỉ được kích hoạt khi điều kiện mà bạn cung cấp là đúng.
  • Các điểm ngắt đối với các trường hợp ngoại lệ bắt gặp hoặc không có điều kiện.
  • Điểm ngắt XHR được kích hoạt khi URL được yêu cầu khớp với chuỗi con mà bạn cung cấp.

Xem phần Tạm dừng mã của bạn với điểm ngắt để tìm hiểu thời điểm và cách thực hiện sử dụng từng loại.

Có một số điều khiển bước mã chưa được giải thích trong hướng dẫn này. Xem Bước qua dòng mã để tìm hiểu thêm.


Xem thêm những thông tin liên quan đến chủ đề cách gỡ lỗi mã javascript

How To Debug JavaScript In Chrome

  • Tác giả: codebubb
  • Ngày đăng: 2020-11-10
  • Đánh giá: 4 ⭐ ( 4734 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, we'll take a look at how to debug JavaScript in Chrome.

    If you want to have a go at debugging the code you can get the project from here: https://github.com/codebubb/javascript-debugging-in-chrome

    How To Debug JavaScript In Chrome
    -----------------------------------------------------------
    00:00 Introduction
    00:38 Project overview
    01:27 Finding errors in the console
    03:40 Setting breakpoints
    07:09 Using the Scope tools
    09:08 Watched expressions
    09:51 Accessing Variables in the console
    10:32 DOM Breakpoints
    11:51 Conclusion

    — Follow Me —
    Twitter: https://www.twitter.com/codebubb
    Facebook: https://www.facebook.com/juniordevelopercentral/
    Blog: https://www.juniordevelopercentral.com/
    — Thanks! —

    So in this JavaScript debugging tutorial, we'll be taking a look at how you can use the Chrome Dev tools to find errors in the code running in your web pages or apps.

    We'll first take a look at how you can diagnose errors in the console and jump directly to the part of your code that is causing that particular error.

    We'll then look at how you can use the developer tools to set breakpoints in the JavaScript code running on a page and step through the code that is running to identify problems with variables and other aspects of the app that's running.

    We'll also look at some of the other tools that are available in Chrome such as the scope tool and watched expressions.

    Finally, we'll take a look at how you can access variables in the console whilst debugging JavaScript and also how you can setup DOM breakpoints to investigate problems with your code.
    .

Gỡ lỗi và ngoại lệ trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 2302 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, mình sẽ giúp bạn xem xét cách gỡ lỗi các chương trình JavaScript và sự lan truyền lỗi. JavaScript là một trong những ngôn ngữ

Làm cách nào để gỡ lỗi mã JavaScript của tôi? [đóng cửa]

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1652 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Firebug là một trong những công cụ phổ biến nhất cho mục đích này.

Gỡ lỗi Javascript với Visual Studio 2005

  • Tác giả: dotnet.edu.vn
  • Đánh giá: 4 ⭐ ( 8291 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hầu hết chúng ta đều nhận thấy việc sự khó khăn trong việc gỡ lỗi mã java script. Bài viết này của tôi sẽ hướng dẫn các bạn gỡ lỗi java script trong Visual Studio 2005.

Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt

  • Tác giả: s22.galaxyz.net
  • Đánh giá: 4 ⭐ ( 2474 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn cuối cùng để gỡ lỗi JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 8233 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Làm cách nào để gỡ lỗi JavaScript trong IntelliJ?

  • Tác giả: presbyteryofstockton.org
  • Đánh giá: 5 ⭐ ( 3761 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để bắt đầu gỡ lỗi? Mở tệp HTML tham chiếu JavaScript để gỡ lỗi hoặc chọn tệp HTML trong Cửa sổ Công cụ Dự án. Từ menu ngữ cảnh của trình chỉnh sửa hoặc lựa chọn, hãy chọn Gỡ lỗi . IntelliJ IDEA tạo cấu hình gỡ lỗi và bắt đầu phiên gỡ lỗi thông qua nó.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  20+ Ví dụ về CSS Hộp Chọn lọc Cảm hứng - html chọn hộp css

By ads_php