Chrome có thể đọc javascript không?

Hướng dẫn tương tác từng bước này, sẽ hướng dẫn bạn quy trình cơ bản để gỡ lỗi JavaScript trong Chrome DevTools. Nó sẽ cho bạn thấy cách gỡ lỗi một vấn đề cụ thể, nhưng quy trình chung mà bạn học được có thể áp dụng để gỡ lỗi tất cả các loại lỗi của JavaScript

Nếu bạn đang sử dụng bảng điều khiển. log() để tìm và sửa các lỗi trong code của mình, hãy xem xét sử dụng quy trình được thảo luận trong hướng dẫn này. Nó thường nhanh và hiệu quả hơn rất nhiều

Tham khảo các khoa học về Javascript tại Techmaster

Lộ trình ReactJs giao diện người dùng 5 tháng

Lộ trình NodeJs 4,5 tháng

Bước 1. Tái hiện lỗi

Tái hiện lỗi (reproducte) luôn là bước đầu tiên để gỡ lỗi. "Tai current bug" có nghĩa là tìm ra một loạt các hành động làm cho lỗi xuất hiện. Bạn có thể cần tái hiện lỗi nhiều lần, vì thế cố gắng loại bỏ bất kỳ bước nào không cần thiết

Làm theo hướng dẫn dưới đây để tái hiện lỗi, cái bạn sẽ sửa trong bài viết này

1. Nhấp vào Mở bản trình diễn. Trang demo sẽ mở trong tab mới
2. Trên trang demo, nhập 5 cho Số 1
3. Nhập 1 cho Số 2
4. Nhấn Add Number 1 và Number 2
5. Kết quả sẽ là 5 + 1 = 51

Kết quả này là sai. Kết quả đúng phải là 6. Và đây chính là lỗi bạn sẽ sửa

Bước 2. Pastop code with a breakpoint

DevTools giúp bạn tạm dừng mã trong quá trình thực thi và kiểm tra giá trị của tất cả các biến tại thời điểm đó. Công cụ để tạm dừng mã gọi là điểm dừng. Please try

1. Mở DevTools trên trang demo bằng cách nhấn Command + Option + I (Mac) hoặc Control + Shift + I (Windows, Linux)

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

3. Nhấp vào Event Listener Breakpoint để mở rộng phần này. DevTools sẽ liệt kê một loạt các loại sự kiện có thể mở rộng, chẳng hạn như Animation và Clipboard

4. Di chuyển đến mục Chuột, nhấp vào Mở rộng. DevTools sẽ hiển thị danh sách các sự kiện chuột, chẳng hạn như nhấp chuột, với hộp kiểm bên cạnh

5. Chọn sự kiện nhấp chuột

DevTools được mở trên trang demo, với Sources planel được mở và trình nghe sự kiện nhấp chuột được cho phép. Nếu số lượng DevTools của bạn lớn, Event Listener Breakpoints có thể ở bên phải thay vì ở phía dướ bên trái như hình trên

6. Nhấp vào Thêm số 1 và số 2 một lần nữa. DevTools tạm dừng và tô sáng một dòng mã trong bảng Nguồn. DevTool đánh dấu dòng này

function onClick() {

Khi bạn chọn sự kiện nhấp chuột, bạn đã thiết lập điểm ngắt dựa trên sự kiện dựa trên tất cả các nhấp chuột sự kiện. Khi bất kỳ nút nào được nhấp và nút đó có trình xử lý nhấp chuột (xác thực điều này khi sự kiện xảy ra), DevTools tự động dừng trên dòng đầu tiên của trình xử lý nhấp chuột

Chú thích. Đây chỉ là một trong nhiều loại breakpoint mà DevTools cung cấp. Điểm dừng bạn cần phải phụ thuộc vào kiểu vấn đề bạn đang gỡ lỗi

Tham khảo các khóa học lập trình trực tuyến, onlab và thực hiện lập trình tại TechMaster

Bước 3. Duyệt qua mã

Một trong những nguyên nhân phổ biến gây ra lỗi là khi script thực thi sai thứ tự. Duyệt qua mã cho phép bạn thực thi mã, từng dòng một và tìm kiếm chính xác nơi thực thi mã theo thứ tự khác mà bạn muốn. Please try

1. Trên bảng Nguồn của DevTools, nhấp vào Bước vào lệnh gọi hàm tiếp theo

đến bước thực thi hàm onClick(), từng dòng một. DevTools đánh dấu dòng mã sau.

if (inputsAreEmpty()) {

2. Nhấp vào Bước qua lệnh gọi hàm tiếp theo 

. DevTools thực thi inputAreEmpty() mà không đi vào trong nó. Chú ý cách DevTools bỏ qua một vài dòng mã. Bởi vì đầu vàoAreEmpty() có giá trị sai, vì thế khối lệnh nếu không được thực thi.

Đó là ý tưởng về cơ bản về việc duyệt qua mã. Nếu bạn xem mã khi bắt đầu. js, bạn có thể thấy rằng bug sẽ ở đâu đó trong hàm updateLabel(). Thay vì đi qua mọi dòng mã, bạn có thể sử dụng một kiểu điểm dừng khác để tạm dừng mã gần hơn với vị trí của lỗi

Bước 4. Thiết lập một điểm dừng khác

Line-of-code breakpoint là kiểu beakpoint phổ biến nhất. Khi bạn có một dòng mã cụ thể và muốn tạm dừng ở đó, hãy sử dụng điểm ngắt dòng mã. Please try

1. Nhìn vào dòng mã cuối cùng của hàm updateLabel(), nó giống như thế này.  

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

1. Ở phía bên trái của mã, bạn có thể thấy số dòng của đoạn mã này là 32. Bấm vào 32. DevTools đặt một biểu tượng màu xanh dương ở đó. Đ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 sẽ luôn dừng trước khi dòng mã này được thực thi
2. 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 dòng mã bạn đặt điểm dừng.
3. Nhìn vào những dòng mã trong updateLabel() cái đã được thực thi. DevTools in the value of addend1, addend2 and sum

Giá trị của tổng có vẻ đáng nghi ngờ. Nó giống như một chuỗi, trong khi nó phải là một số. This could be the resourcegây ra lỗi

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

Một nguyên nhân phổ biến khác có thể gây ra lỗi là khi một biến hoặc một chức năng tạo ra một mức giá khác với mong đợi. Nhiều lập trình viên sử dụng bảng điều khiển. log() to follow các biến thay đổi như thế nào, nhưng bảng điều khiển. log() có thể hơi trống và không hiệu quả vì 2 lý do. Đầu tiên, bạn cần chỉnh sửa mã sửa đổi với bảng điều khiển nhiều câu lệnh. nhật ký(). Thứ hai, bạn không thể biết chính xác biến nào liên quan đến lỗi, vì thế bạn cần phải có nhiều biến

Một trong những sự thay thế của DevTools với bảng điều khiển. log() là Biểu thức xem. Use Watch Expressions to theo dõi giá trị của các biến theo thời gian. Như  tên gọi Watch Expressions không chỉ giới hạn trong các biến. Bạn có thể lưu trữ mọi biểu thức JavaScript trong Biểu thức xem. Please try

1. Trên bảng Nguồn của DevTools, nhấp vào Xem.  
2. Nhấp vào Thêm biểu thức 
   
   .
3. Nhập loại tổng
4. Nhấn Enter. DevTools hiển thị loại tổng. "sợi dây". Giá trị bên phải là dấu hai chấm là kết quả của Watch Expression of you

Watch Expression panel (phía dưới bên phải), sau khi tạo typeof Watch Expression. Nếu cửa sổ DevTools của bạn lớn, bảng Watch Expression sẽ ở bên phải, phía trên bảng Event Listener Breakpoints

Đúng như dự đoán, tổng là một chuỗi, thay vì là một số. Đây chính là nguyên nhân gây ra lỗi

Công cụ thay thế thứ 2 của DevTools cho bảng điều khiển. log() is Console. Sử dụng Bảng điều khiển để thực hiện các câu lệnh JavaScript. Các thành viên lập trình thường sử dụng Console để ghi đè giá trị của biến khi gỡ lỗi. Trong trường hợp này, Console có thể giúp kiểm tra các phương án sửa lỗi của bạn. Please try

1. Nếu bảng điều khiển của bạn chưa mở, hãy nhấn Escape (Esc) để mở nó. Nó sẽ mở ở bên dưới cửa sổ DevTools
2. Trong Console, nhập parseInt(addend1) + parseInt(addens2)
3. Nhấn Enter. DevTools sẽ thực thi và kết quả là 6, đây là kết quả bạn mong đợi

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

Sau khi đã xác định được phương án để sửa lỗi. Bạn cần chỉnh sửa mã với phương án của mình và chạy lại mã. Bạn không cần phải rời khỏi DevTools để làm điều đó. Bạn có thể chỉnh sửa mã JavaScript trực tiếp trong DevTools UI. Please try

1. Trong trình soạn thảo trên bảng nguồn của DevTools, thay thế var sum = addend1 + addend2 với var sum = parseInt(addend1) + parseInt(addend2);.  
2. Nhấn Command + S (Mac) hoặc Control + S (Windows, Linux) để lưu thay đổi của bạn. Bối cảnh của mã thay đổi thành màu đỏ báo hiệu rằng tập lệnh đã được thay đổi trong DevTools
3. Nhấp vào Vô hiệu hóa điểm ngắt 
   
   . Nó thay đổi thành màu xanh dương báo hiệu đã hoạt động. Trong thiết lập này, DevTools sẽ bỏ qua mọi điểm ngắt mà bạn đã thiết lập.
4. Nhấp vào Tiếp tục thực thi tập lệnh 
   .
5. Try demo with other values. Giờ demo hiện tại sẽ tính toán chính xác giá trị của tổng

Hãy nhớ rằng quy trình này chỉ áp dụng để sửa mã đang chạy trong trình duyệt của bạn. Nó không sửa mã cho tất cả người dùng chạy trang web của bạn. Để làm điều đó, bạn cần sửa mã, cái đang ở trên máy chủ của bạn

Bước tiếp theo

chúc mừng. Bây giờ bạn đã biết những cơ bản thứ về gỡ lỗi JavaScript trong DevTools

Bài hướng dẫn này mới chỉ cho bạn thấy 2 cách thiết lập breakpoint. DevTools cung cấp nhiều cách khác nhau, bao gồm