Làm cách nào để khắc phục sự cố javascript trong chrome?

# Hướng dẫn đầy đủ để gỡ lỗi Javascript trong Chrome Là nhà phát triển, đôi khi việc tìm và sửa lỗi trong mã của bạn có thể cực kỳ khó khăn. Công cụ giúp giải quyết lỗi dễ dàng hơn nhiều là Công cụ dành cho nhà phát triển Chrome (còn được gọi là Chrome DevTools). Chrome DevTools là bộ công cụ dành cho nhà phát triển toàn diện với nhiều công cụ soạn thảo và gỡ lỗi web khác nhau. Nó được tích hợp trực tiếp vào trình duyệt Chrome và giúp các nhà phát triển hiểu sâu hơn về các ứng dụng của họ. Bài viết này hướng dẫn bạn cách gỡ lỗi mã JavaScript bằng Chrome DevTools. Bạn sẽ học cách gỡ lỗi một vấn đề cụ thể, nhưng quy trình công việc chung có thể giúp giải quyết tất cả các loại lỗi trong mã của bạn. ## "Gỡ lỗi" nghĩa là gì? . Trong lập trình và phát triển phần mềm, từ "lỗi" đồng nghĩa với "lỗi". " Một lỗi đề cập đến các khiếm khuyết hoặc lỗi khiến phần mềm (hoặc chương trình) máy tính tạo ra kết quả không chính xác hoặc không mong muốn. Hãy để chúng tôi xem xét một số lỗi mà bạn có thể gặp phải trong chương trình của mình. - **Lỗi cú pháp. ** Có hướng dẫn viết code cụ thể theo từng ngôn ngữ lập trình. Lỗi cú pháp được tạo ra khi bạn vi phạm một hoặc nhiều nguyên tắc này. Chẳng hạn, trong JavaScript, `console. log('your result')` sẽ gây ra lỗi cú pháp vì `console` bị sai chính tả. - **Lỗi ngữ nghĩa (logic). ** Điều này khiến chương trình biên dịch và chạy chính xác. Tuy nhiên, nó sẽ không tạo ra đầu ra mong muốn hoặc dự kiến. - **Lỗi runtime. ** Ở đây, một chương trình có cú pháp tốt nhưng có một lỗi chỉ có thể được phát hiện trong quá trình thực thi. Quá trình sửa lỗi rất quan trọng trong phát triển phần mềm và thường mất nhiều thời gian như viết mã. ## Công cụ dành cho nhà phát triển Chrome là gì Công cụ dành cho nhà phát triển Chrome là một bộ công cụ dành cho nhà phát triển web được tích hợp trực tiếp vào trình duyệt Google Chrome. Nó giúp các nhà phát triển chỉnh sửa các trang web, xác định và giải quyết các lỗi, cho phép họ xây dựng các trang web và ứng dụng nhanh hơn và hiệu quả hơn. Giao diện của Chrome DevTools có khoảng chín bảng.

Dưới đây là tóm tắt về chức năng của mỗi bảng điều khiển. - **Yếu tố. ** Sửa đổi các phần tử DOM trong thời gian thực và quan sát tác động của những thay đổi của bạn trên trang. - **Bảng điều khiển. ** Cung cấp thông tin về các yếu tố tương tác trên một trang web. - ** Nguồn. ** Xem và chỉnh sửa tệp chương trình, gỡ lỗi mã JavaScript và thiết lập không gian làm việc (để những thay đổi bạn thực hiện trong DevTools được lưu vào mã trên hệ thống tệp của bạn). - **Mạng. ** Hiển thị tất cả các tài nguyên hoặc tệp được tải trên một trang web. - **Màn biểu diễn. ** Phân tích tốc độ và tối ưu hóa các ứng dụng web. - **Kỉ niệm. ** Cung cấp thông tin về cách một trang sử dụng bộ nhớ. - **Đăng kí. ** Hiển thị nội dung từ bộ lưu trữ của trình duyệt của bạn. e. g. localStorage, sessionStorage, cookie, IndexDB, v.v. - **Bảo vệ. ** Cung cấp thông tin cơ bản liên quan đến bảo mật, cho phép bạn xem chứng chỉ HTTPS và trạng thái TLS của trang web. - **Ngọn hải đăng. ** Kiểm tra chất lượng, hiệu suất, khả năng truy cập và SEO của ứng dụng. Bài viết này sẽ chủ yếu đề cập đến **Bảng điều khiển nguồn**, nơi chúng tôi gỡ lỗi mã JavaScript. ## Bảng điều khiển nguồn Để bắt đầu với *Bảng điều khiển nguồn* và tất cả các thành phần của nó, trước tiên hãy xem cách mở Chrome DevTools trong trình duyệt của bạn. ### Mở Chrome DevTools Dưới đây là một số cách bạn có thể mở Chrome DevTools trong trình duyệt của mình. - Sử dụng phím tắt. - Command + Opt + I (macOs) - Control + Shift + I (Windows hoặc Linux) - Nhấp chuột phải vào bất kỳ đâu trên trang trình duyệt và nhấp vào tùy chọn "Kiểm tra". - Sử dụng menu chính của Chrome. 1. Nhấp vào nút trình đơn Chrome 2. Chọn *Công cụ khác* 3. Chọn *Công cụ dành cho nhà phát triển* Đây là những gì bạn sẽ thấy khi mở Công cụ dành cho nhà phát triển Chrome.
> Theo mặc định, Công cụ dành cho nhà phát triển của Chrome sẽ mở ra bảng Thành phần. ### Khám phá bảng Nguồn Mở **Bảng nguồn** cho trang demo mẫu mà chúng tôi sẽ sử dụng cho hướng dẫn này bằng cách thực hiện theo các hướng dẫn bên dưới. - Mở [trang ví dụ](https. //devtools-demo. netlify. ứng dụng/) trong Chrome. - Mở công cụ dành cho nhà phát triển Chrome. - Chọn *tab Nguồn*. Đây là những gì bạn sẽ thấy nếu bạn mở *Bảng điều khiển nguồn* lần đầu tiên.
Nhấp vào nút chuyển đổi và chọn `chính. js` trong chế độ xem dạng cây. Đây là những gì sẽ hiển thị.
Có thể thấy, bảng Nguồn có ba phần. - **Trang điều hướng tệp [1]. ** Hiển thị tất cả các tệp mà một trang tải, chẳng hạn như HTML, JavaScript, CSS và các tệp khác. - **Trình chỉnh sửa mã [2]. ** Nhấp vào một tệp trong ngăn điều hướng tệp để xem hoặc chỉnh sửa nội dung của nó trong trình chỉnh sửa mã. - **Ngăn gỡ lỗi JavaScript [3]**. Chứa tất cả các công cụ cần thiết để gỡ lỗi mã JavaScript. ## Dự án trang ví dụ Chúng tôi sẽ sử dụng trang demo mẫu mà bạn đã mở trong phần trước để trình bày cách gỡ lỗi JavaScript bằng Chrome DevTools. Chương trình demo thực hiện một phép tính số học cơ bản là cộng hai số và in ra tổng của chúng.
Tuy nhiên, có một số lỗi trên trang này mà bạn sẽ sửa nếu làm theo hướng dẫn này. ## Bàn điều khiển. log Method Cách đơn giản nhất để giải quyết lỗi trên trang demo mẫu là chèn `console. log()` trong mã của bạn để kiểm tra đồng thời các giá trị biến. Phương pháp này là một trong những phương pháp phổ biến nhất trong số các nhà phát triển. Thông thường, như vậy là đủ, nhưng đôi khi bạn không có đủ thông tin chi tiết hoặc kết quả mong đợi cần thiết để gỡ lỗi. Mặc dù `bảng điều khiển. log()` có thể là một tùy chọn tốt để giải quyết lỗi, Chrome DevTools thực hiện công việc hiệu quả hơn. Do đó, thay vì sử dụng `console. log()` để xác định mã của bạn sai ở đâu, bạn nên cân nhắc sử dụng Chrome DevTools để thay thế. ## Cách gỡ lỗi JavaScript bằng DevTools Bây giờ chúng ta đã có tổng quan nhanh về Chrome DevTools, hãy thảo luận về một số chiến lược gỡ lỗi hữu ích để giúp gỡ lỗi mã cho trang demo mẫu. Ý tưởng chung ở đây là đặt một điểm ngắt, một điểm dừng có chủ ý trong mã của bạn, sau đó thực hiện từng bước một trong quá trình thực thi mã của bạn. ### Bước 1. Tái tạo lỗi Tái tạo lỗi là bước đầu tiên để gỡ lỗi. "Tái tạo lỗi" có nghĩa là tìm một loạt các hành động khiến lỗi xuất hiện một cách nhất quán. Làm theo các hướng dẫn bên dưới để tạo lại lỗi mà bạn sẽ sửa. - Mở [trang demo mẫu](https. //devtools-demo. netlify. app/) trong tab mới. - Một trang, nhập 23 cho trường nhập đầu tiên. - Nhập 4 cho trường nhập khác. - Nhấp vào nút "Thêm số".
Rất tiếc. Nhìn vào kết quả được in bên dưới nút. Nó nói 23 + 4 = 234, sai. Kết quả phải là 27. Đây là lỗi mà bạn sẽ sửa chữa. ### Bước 2. Thêm điểm ngắt Điểm dừng là điểm dừng có chủ ý trong quá trình thực thi mã của bạn. Đó là điểm trong quá trình thực thi chương trình mà nhà phát triển muốn tạm dừng chương trình và kiểm tra nội dung của các biến và các thuộc tính khác. Trên trang demo, hiển nhiên là tổng của hai số trở nên không chính xác sau khi nhấp vào nút “Thêm số”. Vì vậy, bạn cần kiểm tra xem chương trình có cộng đúng giá trị không. Để làm điều này, bạn phải đặt điểm dừng ngay trước khi chương trình cộng hai số. Làm điều này sẽ giúp phân tích các giá trị của tất cả các biến được xác định cho đến điểm dừng. Có nhiều loại điểm dừng bạn có thể đặt trong mã của mình. Chúng ta hãy nhìn vào một số trong số họ. . Loại điểm dừng. Sử dụng cái này khi bạn muốn tạm dừng. . . --------. --------------------. . dòng mã. trên một điểm chính xác trong mã của bạn. . . có điều kiện. trên một điểm chính xác trong mã của bạn nhưng chỉ khi một điều kiện đã xác định được đánh giá là đúng. . . DOM. tại một điểm trong khối mã sửa đổi một nút DOM cụ thể. . . Người nghe sự kiện. tại một điểm trong khối mã chạy sau khi một sự kiện được kích hoạt. . . Hàm số. Bất cứ khi nào một chức năng được gọi. . #### Cách thêm điểm dừng Ở đây, chúng ta sẽ thiết lập điểm ngắt dòng mã. Để làm điều này. - Mở Chrome DevTools và chuyển đến *Bảng điều khiển nguồn* - Điều hướng đến *ngăn điều hướng tệp* và chọn `chính. js` để mở nội dung của nó trong trình chỉnh sửa mã. - Trong trình chỉnh sửa mã, nhấp vào dòng số 21, ngay trên chữ số, không phải trên mã. Nó sẽ giống như thế này.
Sau khi đặt điểm ngắt, cách dễ nhất để kích hoạt trình gỡ lỗi là điền vào các trường nhập liệu trên trang demo và nhấp vào nút "Thêm số". DevTools sẽ tạm dừng thực thi và đánh dấu *dòng thứ 21* (nơi đặt điểm ngắt). *Xin chúc mừng. Bạn đã đặt một điểm dừng. * ### Bước 4. Bước qua mã Thực thi các tập lệnh sai thứ tự là một nguồn lỗi phổ biến. Bước qua mã của bạn cho phép bạn duyệt qua mã từng dòng một để tìm ra nơi xảy ra lỗi. Để giúp minh họa khái niệm bước qua mã của bạn, chúng tôi sẽ sử dụng các nút ở đầu *ngăn gỡ lỗi JavaScript*. *Bắt đầu nào. * - **"Sơ yếu lý lịch". . [](https. //tôi. imgur. com/0GE5HwY. jpg)** Với nút này, DevTools thực thi tập lệnh của bạn cho đến điểm ngắt tiếp theo. Và nếu không còn điểm dừng nữa, trình gỡ lỗi sẽ mất quyền kiểm soát chương trình. - **"Bươc". ** Điều này được sử dụng để chạy câu lệnh javaScript tiếp theo. - **"Bước qua lời gọi hàm tiếp theo. ". [](https. //tôi. imgur. com/ZIi5sbR. jpg)** Cho phép trình gỡ lỗi thực thi khối mã tiếp theo. Tuy nhiên, nếu khối mã liên quan đến lệnh gọi hàm, trình gỡ lỗi sẽ "bước qua" (bỏ qua) nó. - **"Bước vào lệnh gọi chức năng tiếp theo. "** Khiến trình gỡ lỗi thực thi hàm tiếp theo để phân tích sâu hơn. Nếu có một lệnh gọi hàm, nó sẽ đi vào đó và bạn có thể thấy cách hàm được thực thi từng dòng cho đến khi nó trả về. - **"Bước ra khỏi chức năng hiện tại. ". [](https. //tôi. imgur. com/E1HFFo1. jpg)** Nếu bạn bước vào một hàm nhưng không muốn xem phần còn lại của hàm thực thi như thế nào, bạn có thể bỏ qua bằng nút này. Đó là ý tưởng cơ bản đằng sau bước mã của bạn. Nếu bạn xem mã trong `main. js`, rõ ràng là lỗi có thể nằm ở đâu đó trong hàm `onClick()` (nơi hai số được thêm vào). . thông tin. bóng đèn tròn. **QUAN TRỌNG** Khi gỡ lỗi một cơ sở mã lớn, nhiều mã có thể không liên quan đến vấn đề bạn đang gỡ lỗi. Bạn có thể "bước" qua tất cả các dòng, nhưng điều đó có thể tẻ nhạt. Bạn cũng có thể đặt điểm dừng dòng mã trên dòng mà bạn quan tâm rồi nhấn "Tiếp tục thực thi tập lệnh", nhưng có một cách nhanh hơn. Bấm chuột phải vào dòng mã mà bạn quan tâm, sau đó chọn "Tiếp tục đến đây. " DevTools sẽ chạy tất cả mã cho đến thời điểm đó và sau đó tạm dừng trên dòng đó. . ### Bước 5. Kiểm tra các giá trị biến Chrome DevTool cung cấp các công cụ giúp bạn phân tích trạng thái của mã và các giá trị biến trên bất kỳ dòng nào khi bạn lướt qua nó. - **Đồng hồ. ** Sử dụng cửa sổ Watch, bạn có thể chỉ định một biến (hoặc biểu thức) mà bạn muốn theo dõi. Bạn có thể thêm biểu thức hoặc biến bằng cách nhấp vào dấu cộng *****. - ** Ngăn xếp cuộc gọi. ** Cửa sổ Call Stack hiển thị một tập hợp các hàm và phương thức được gọi trong quá trình thực thi mã của bạn. - **Phạm vi. ** Sử dụng cửa sổ phạm vi để xem và chỉnh sửa giá trị của các thuộc tính và biến trong phạm vi đóng, cục bộ và toàn cầu. Bằng cách "xem" các biến`firstNumber` và `secondNumber`, chúng ta có thể thấy rằng các giá trị của chúng có vẻ đáng ngờ. Chúng được đặt trong dấu ngoặc kép, có nghĩa là chúng là giá trị chuỗi. Để xác nhận điều này, hãy xem kiểu dữ liệu của các biến này bằng cách thêm các biểu thức sau vào danh sách theo dõi. - `typeof firstNumber` - `typeof secondNumber`
Hiện đã xác nhận rằng giá trị của các biến là chuỗi, đây có thể là nguyên nhân gây ra lỗi. ### Bước 5. Áp dụng cách khắc phục Sau khi tìm ra nguyên nhân của lỗi, tất cả những gì còn lại là cố gắng khắc phục nó. Bạn có thể làm điều này bằng cách chỉnh sửa mã của mình và chạy lại bản demo. Bạn thậm chí không cần rời khỏi DevTools để áp dụng bản sửa lỗi. Làm theo hướng dẫn bên dưới, bạn có thể chỉnh sửa mã JavaScript của mình trực tiếp trong giao diện DevTools. - Nếu bạn đang ở chế độ gỡ lỗi, hãy nhấp vào nút *Tiếp tục thực thi tập lệnh*. [](https. //tôi. imgur. com/0GE5HwY. jpg) để thoát. - Bây giờ, trong Trình chỉnh sửa mã, thay thế mã trên *dòng 21* bằng `let sum = parseInt(firstNumber) + parseInt(secondNumber)`. - Nhấn Command+S (Mac) hoặc Control +S (Windows, Linux) để lưu thay đổi của bạn. - Nhấp vào *Vô hiệu hóa điểm dừng*. [](https. //tôi. imgur. com/PjYe3f8. png) để bỏ qua bất kỳ điểm ngắt nào bạn đã đặt. Bây giờ, hãy thử bản demo với các giá trị khác nhau.
Bản trình diễn hiện hoạt động như mong đợi. ## Kết thúc Xin chúc mừng. Bạn đã hoàn tất việc gỡ lỗi chương trình JavaScript của mình bằng Chrome DevTools. Có rất nhiều thứ bạn có thể làm với Chrome DevTools. Nó là một công cụ mạnh mẽ và dành thời gian để thành thạo nó sẽ giúp bạn trở thành một trình gỡ lỗi hiệu quả hơn. Tôi khuyến khích bạn thử nghiệm với DevTools bằng các ứng dụng của riêng bạn. Làm quen với việc xem qua mã của bạn và phân tích trạng thái của các biến và thuộc tính tại mỗi điểm. Cảm ơn vì đã đọc. Tôi hy vọng đây là một bài đọc đáng giá. Vui lòng chia sẻ bài viết này và theo dõi tôi trên Twitter [@dboatengx](https. //twitter. com/dboatengx) để cập nhật các bài đăng trong tương lai. Chúc mừng. . thành công. bóng đèn tròn. **Bạn muốn tìm hiểu thêm?** Hãy xem [tài liệu] của Google(https. // nhà phát triển. trình duyệt Chrome. com/docs/devtools/javascript/) khi gỡ lỗi JavaScript bằng Chrome DevTools.