Chức năng javascript trong chrome ở đâu?

Bài viết này sẽ tập trung vào việc gỡ lỗi mã JavaScript trong Công cụ dành cho nhà phát triển của Google Chrome. Công cụ dành cho nhà phát triển của Chrome cực kỳ mạnh mẽ và gần như chắc chắn sẽ tăng tốc quá trình khắc phục sự cố của bạn

Chúng tôi sẽ sử dụng Báo cáo sự cố Raygun để tìm dấu vết ngăn xếp và dòng mã xảy ra lỗi trên. Bạn có thể đăng ký dùng thử miễn phí 14 ngày tại đây

Các bước chúng ta sẽ làm theo là

Vì vậy, chúng ta hãy đi sâu vào

Bước 1. Giới thiệu dự án mẫu

Để trình bày cách gỡ lỗi ứng dụng bằng Chrome Dev Tools, tôi sẽ sử dụng biểu mẫu “Thêm người” đơn giản. Biểu mẫu này cho phép bạn nhập tên, đệm và họ. Khi nhấp vào nút “Lưu”, biểu mẫu sẽ xử lý một chút và dữ liệu sẽ được gửi đến máy chủ (tưởng tượng) của bạn

Mã cho biểu mẫu này có ba chức năng

1. Trình xử lý nhấp chuột
2. Hàm chuỗi viết hoa
3. Chức năng lưu

var saveButton = document.getElementById('saveButton');
var firstNameField = document.getElementById('firstName');
var middleNameField = document.getElementById('middleName');
var lastNameField = document.getElementById('lastName');

function onSaveButtonClick(){
    var firstName = firstNameField.value;
    var middleName = middleNameField.value;
    var lastName = lastNameField.value;

    // capitalise the names
    firstName = capitalizeString(firstName);
    middleName = capitalizeString(middleName);
    lastName = capitalizeString(lastName);

    doSave(firstName, middleName, lastName);
}

function capitalizeString(value){
    return value.split('')[0].toUpperCase() + value.slice(1);
}

function doSave(firstName, middleName, lastName){
    alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}

saveButton.addEventListener('click', onSaveButtonClick);

Thật không may, sau khi vận chuyển sản phẩm này đến nơi sản xuất muộn vào tối thứ Sáu, bạn bắt đầu thấy các báo cáo lỗi xuất hiện trong bảng điều khiển của mình. Có một lỗi và bạn cần sửa nó nhanh chóng

2. Phân tích báo cáo trong Raygun Crash Reporting

Các báo cáo lỗi xuất hiện trong Raygun chứa nhiều thông tin mà bạn có thể sử dụng để tìm và sửa lỗi, vì vậy, hãy xem những gì chúng tôi đang xử lý

Thông tin bạn cần để gỡ lỗi nằm trong mô-đun “Stacktrace”. Phần "Tin nhắn" của Stacktrace là một tổng quan ngắn về những gì sai. Trong trường hợp này, phương thức toUpperCase đang được gọi trên một giá trị không xác định

Stacktrace cho bạn biết lỗi xảy ra ở đâu và chuỗi lệnh gọi hàm dẫn đến lỗi đó. Như bạn có thể thấy trong ảnh chụp màn hình ở trên, đã xảy ra lỗi trong hàm capitalizeString trên Dòng 22 của chỉ mục. tập tin js

Biết dòng nào gây ra lỗi có nghĩa là bạn có thể chuyển ngay đến nơi xảy ra lỗi và bắt đầu tìm hiểu nguyên nhân gây ra sự cố

3. Khám phá giải phẫu của Công cụ dành cho nhà phát triển

Bước đầu tiên là khởi chạy ứng dụng trong Chrome và mở Công cụ dành cho nhà phát triển. Bạn có thể thực hiện việc này bằng bàn phím bằng phím tắt CMD-OPT-I trên macOS hoặc CTRL-SHIFT-I trên Windows

Giờ đây, Công cụ dành cho nhà phát triển sẽ được mở bên trong tab trình duyệt và tab Bảng điều khiển sẽ hoạt động. Tab này cho phép bạn thực thi mã JavaScript tùy ý bất kỳ lúc nào hoặc xem bất kỳ kết quả đầu ra nào từ bảng điều khiển. nhật ký cuộc gọi

Hãy thử nhập alert('Hello!'); và nhấn Enter. Bạn sẽ thấy cảnh báo xuất hiện ngay lập tức

Tab Bảng điều khiển là một công cụ sửa lỗi có giá trị vì bạn có thể sử dụng nó như một bản ghi nhớ để thử mã và đánh giá các biến khi bạn chẩn đoán sự cố của mình

Để gỡ lỗi mã, trước tiên bạn cần có khả năng điều hướng qua mã nguồn của mình trong Công cụ dành cho nhà phát triển. Bạn làm điều này trong tab Nguồn

Ngăn bên trái của tab này có chế độ xem dạng cây của tất cả các tệp nguồn được tải vào trang. Bạn có thể điều hướng những thứ này giống như trong IDE, vì nội dung được hiển thị trong ngăn trung tâm. Khung bên dưới cung cấp cho bạn tất cả các tùy chọn gỡ lỗi, chúng ta sẽ thảo luận chi tiết hơn ở phần sau của bài viết

Nếu bạn có nhiều tệp, bạn có thể tìm kiếm chúng bằng cách sử dụng phím tắt CMD-P trên macOS hoặc CTRL-P trên Windows, sau đó chỉ cần bắt đầu nhập tên của tệp

Trong ứng dụng, bạn biết vấn đề nằm ở index.js file, vì vậy hãy chọn nó từ danh sách bên trái để xem nội dung của nó

Bước 4. Thêm điểm dừng vào mã của bạn

Bây giờ bạn đã biết cách xem mã của mình, chúng tôi muốn có thể lướt qua từng dòng một để xem mọi thứ có thể sai ở đâu. Để làm điều này, chúng tôi sử dụng các điểm ngắt. Điểm dừng là điểm đánh dấu tại các điểm cụ thể trong mã dừng thực thi để bạn có thể kiểm tra trạng thái của mã tại thời điểm đó và tiếp tục thực thi từng dòng một

Có một số cách khác nhau để thêm điểm ngắt mà tôi sẽ giới thiệu ở đây

Điểm ngắt sự kiện

Bạn có thể buộc ngắt thực thi khi một sự kiện cụ thể xảy ra trên trang. Sử dụng phần Điểm ngắt của trình xử lý sự kiện trong ngăn gỡ lỗi, bạn có thể mở rộng nhóm có liên quan và tìm sự kiện mà bạn muốn dừng thực thi sau đó.

Ví dụ: bạn có thể chọn hộp cho sự kiện “nhấp chuột”, sự kiện này sẽ dừng thực thi khi nhấp chuột được thực hiện ở bất kỳ đâu trên trang

Điểm ngắt dòng

Cách phổ biến nhất để thêm điểm ngắt là tìm dòng cụ thể mà bạn muốn dừng và thêm vào đó. Điều hướng đến tệp và dòng bạn quan tâm và nhấp vào số dòng. Một điểm đánh dấu màu xanh lam sẽ được thêm vào dòng đó và việc thực thi sẽ dừng lại mỗi khi nó chạm vào dòng mã đó. Trong ảnh chụp màn hình bên dưới, nó sẽ dừng ở Dòng 7 của index.js

Điểm ngắt có lập trình

Bạn cũng có thể thêm các điểm dừng theo chương trình, điều này có thể hữu ích nếu bạn không muốn tìm kiếm mã của mình trong Công cụ dành cho nhà phát triển khi bạn có nó trong IDE của mình. Bạn cũng có thể sử dụng phương pháp này để giới thiệu các điểm dừng một cách có điều kiện (ví dụ: tại các lần lặp nhất định của các vòng lặp hoặc nếu mã chạy khi tải trang và không có thời gian để thêm điểm ngắt theo cách thủ công)

Để làm điều này, bạn thêm câu lệnh debugger; tại vị trí bạn muốn ngắt thực thi. Đoạn mã dưới đây sẽ có tác dụng tương tự như Line breakpoint ở trên

điểm ngắt lỗi

Công cụ dành cho nhà phát triển có một tính năng hữu ích sẽ dừng thực thi khi nó gặp phải một ngoại lệ trong mã của bạn, cho phép bạn kiểm tra điều gì đang xảy ra tại thời điểm xảy ra lỗi. Bạn thậm chí có thể chọn dừng các ngoại lệ đã được xử lý bằng câu lệnh try/catch

Để bật tính năng này, hãy nhấp vào biểu tượng dấu dừng có biểu tượng tạm dừng bên trong. Nó sẽ có màu xanh khi được kích hoạt. Chọn hộp dường như cũng phá vỡ các ngoại lệ bị bắt

Bước 5. Bước qua mã của bạn

Bây giờ chúng ta đã biết cách đột nhập vào mã của mình, bây giờ chúng ta muốn đi qua từng dòng để có thể tìm ra điều gì đang xảy ra. Đầu tiên, đặt một điểm dừng trên Dòng 7 - ngay bên trong trình xử lý nhấp chuột của nút Thêm để chúng tôi có thể bắt đầu từ đầu

Trong phần trước, chúng tôi đã suy luận từ báo cáo lỗi Raygun rằng lỗi đến từ phương pháp capitalizeString. Phương thức này được gọi ba lần, vậy trường hợp nào là thủ phạm? . Bạn biết rằng Dòng 13 liên quan đến giá trị Tên đệm. Do đó, bạn nên tập trung nỗ lực vào việc tái tạo lỗi bằng cách soạn thảo thông tin đầu vào của mình một cách chính xác

Với kiến ​​thức bổ sung này, bạn có thể điền vào các trường Tên và Họ nhưng để trống Tên đệm để xem điều này có gây ra lỗi không

Nhấn nút Lưu. Từ đây, tab Nguồn sẽ mở ra nơi bạn có thể thấy điểm dừng được kích hoạt. Bây giờ bạn có thể bắt đầu bước qua mã. Để thực hiện việc này, bạn sử dụng các nút trong ngăn gỡ lỗi. Bộ nút này có thể được sử dụng để tạm dừng thực thi, chuyển qua lệnh gọi chức năng tiếp theo, chuyển sang lệnh gọi chức năng tiếp theo, thoát khỏi lệnh gọi chức năng hiện tại, chuyển tiếp, hủy kích hoạt hoàn toàn các điểm dừng hoặc tạm dừng các trường hợp ngoại lệ

Bạn sẽ sử dụng những thứ này để thực hiện tất cả các cách để thực hiện hàm capitalizeString của mình. Vì vậy, từ Dòng 7, hãy sử dụng nút “Bước qua Dòng hiện tại” cho đến khi chúng ta đến Dòng 13. Đường kích hoạt được hiển thị với các đường bên trên và bên dưới nó

Giờ đây, bạn có thể sử dụng nút “Bước vào Hàm” để chuyển sang lệnh gọi hàm capitalizeString, chuyển từ Dòng 13 sang Dòng 20

Điều hướng ngăn xếp cuộc gọi

Khi bạn đang di chuyển qua mã như thế này, bạn có thể muốn quay lại hàm gốc để kiểm tra xem điều gì đang xảy ra tại thời điểm đó. Để thực hiện việc này, hãy sử dụng phần Ngăn xếp cuộc gọi, liệt kê tất cả các chức năng đã được chuyển qua để đến điểm này trong mã của bạn — giống hệt như Ngăn xếp cuộc gọi được hiển thị trong báo cáo lỗi Raygun

Bạn chỉ cần nhấp vào một mục trong danh sách này và bạn sẽ được chuyển trở lại chức năng đó. Hãy nhớ rằng vị trí hiện tại trong quá trình thực thi không thay đổi, do đó, việc sử dụng các nút Bước qua sẽ tiếp tục từ đầu ngăn xếp cuộc gọi

Bước 6. Xác định trạng thái ứng dụng của bạn

Bây giờ bạn đã điều hướng đến nơi xảy ra lỗi của mình, chúng tôi cần kiểm tra trạng thái của ứng dụng và tìm ra nguyên nhân gây ra lỗi

Có một loạt các tùy chọn để tìm ra những giá trị mà biến chứa và đánh giá các biểu thức trước khi mã tiếp tục. Chúng ta sẽ lần lượt xem xét từng

di chuột

Cách đơn giản nhất để xác định giá trị của một biến là chỉ cần di chuột qua nó và một chú giải công cụ sẽ bật lên với giá trị. Bạn thậm chí có thể chọn một nhóm biểu thức và di chuột qua nhóm này để lấy đầu ra của biểu thức

Xem

Bạn có thể thêm biểu thức vào bảng Xem hiển thị giá trị hiện tại của biểu thức khi bạn di chuyển qua mã. Điều này rất hữu ích để theo dõi các biểu thức phức tạp hơn thay đổi theo thời gian như thế nào

Bạn thêm những thứ này bằng cách nhấp vào nút “+” ở đầu bảng điều khiển hoặc bằng cách chọn một biểu thức, nhấp chuột phải và chọn “Thêm văn bản đã chọn vào đồng hồ”

Phạm vi

Bảng Phạm vi hiển thị danh sách các biến hiện có trong phạm vi và các giá trị được liên kết của chúng. Điều này tương tự như bảng Watch nhưng được tạo tự động bởi Chrome Dev Tools. Bảng Phạm vi phù hợp để xác định các biến cục bộ và giúp bạn không cần thêm chúng vào danh sách Theo dõi một cách rõ ràng

Bảng điều khiển

Cuối cùng, tab Bảng điều khiển là một công cụ tuyệt vời để kiểm tra các giá trị biểu thức và thử nghiệm mã. Chỉ cần quay lại tab Bảng điều khiển, nhập một số mã và nhấn enter. Chrome Dev Tools sẽ thực thi mã trong ngữ cảnh và phạm vi của điểm dừng hiện tại

Bước 7. Sửa lỗi

Chuyển sang tab Bảng điều khiển và bắt đầu phân tích dòng gây ra lỗi để bạn có thể khắc phục bằng cách sử dụng tab Bảng điều khiển

Đầu tiên, kiểm tra đầu ra của lệnh gọi value.split('') để bạn có thể lấy ký tự đầu tiên sau đó gọi hàm toUpperCase trên đó

Thực thi biểu thức trong Bảng điều khiển cho thấy nó trả về một mảng trống — đây là nguyên nhân gây ra lỗi. Vì nó trả về một mảng trống và chúng tôi cố gắng gọi toUpperCase trên mục đầu tiên (không được xác định, vì không có mục nào) gây ra lỗi cho bạn

Bạn có thể xác minh điều này bằng cách nhập biểu thức đầy đủ vào Bảng điều khiển

Vì vậy, để khắc phục sự cố, bạn cần kiểm tra xem chuỗi có trống hoặc không xác định không. Nếu đúng như vậy, bạn cần trả lại một chuỗi trống mà không cần thực hiện bất kỳ xử lý nào

function capitalizeString(value){
    if(!value || value.length === 0){
        return '';
    }

    return value.split('')[0].toUpperCase() + value.slice(1);
}

Tóm lược

Điều đó kết thúc phần giới thiệu nhanh này để gỡ lỗi JavaScript trong Công cụ dành cho nhà phát triển của Chrome. Nó là một công cụ mạnh mẽ và dành thời gian để thành thạo nó sẽ tạo ra sự khác biệt đáng kể trong việc tăng tốc kỹ năng sửa lỗi của bạn

Có một số tính năng tuyệt vời trong đó mà tôi chưa đề cập đến ở đây, vì vậy tôi khuyên bạn nên kích hoạt nó và thử nghiệm trong ứng dụng của mình. Làm quen với việc xem qua mã và kiểm tra trạng thái của mọi thứ tại mỗi điểm

Nếu bạn muốn tìm hiểu thêm, chúng tôi đã viết toàn bộ hướng dẫn về gỡ lỗi JavaScript trong các trình duyệt chính. Gỡ lỗi JavaScript bằng quy trình tương tự như trên trong

Tôi có thể tìm bảng điều khiển JavaScript trong Chrome ở đâu?

Tại sao JavaScript không hoạt động trong Chrome?

Làm cách nào để kiểm tra hàm JavaScript nào được gọi?