Vấn đề javascript với chrome

Là một nhà phát triển, công việc tìm kiếm và sửa lỗi có thể có đôi chút khó khăn. Bạn chỉ có thể chú ý đến việc sử dụng console.log() hoặc đặt debugger tại bất kỳ vị trí nào để chỉnh sửa vấn đề bạn đang gặp phải để mã chạy chính xác. không còn nữa

Trong bài viết này là tất cả về cách tìm lỗi một cách chính xác. Bạn sẽ tìm hiểu cách sử dụng Công cụ dành cho nhà phát triển Chrome để thiết lập các điểm dừng tại đây và tìm chúng trong mã của bạn. Quy trình công việc này thường là một cách hiệu quả hơn nhiều để tìm kiếm và sửa lỗi trong mã của bạn

Hướng dẫn này chỉ cho bạn cách sửa lỗi một vấn đề cụ thể, nhưng quy trình công việc chung là để sửa lỗi tất cả các loại lỗi JavaScript. Sau đây sẽ là các bước cụ thể để sửa lỗi bằng Chrome Developer Tools

Bước 1. Tái tạo lỗi

---

Đầu tiên chương trình có bug thì chúng ta cố tình tạo ra bug với mục đích để chương trình chạy sẽ xuất hiện lỗi liên tục. Ở đây, chúng ta có một bản demo nho nhỏ như sau, hãy thực hiện các bước sau để xác định lỗi

• Mở trang web chứa chương trình cộng hai số bị lỗi ở một tab mới, MỞ DEMO
• In ô input first, input 1 number of option, at here input number 1 for Number 1
• Tại ô nhập thứ hai cũng vậy, ở đây sẽ nhập số 1 cho Số 2
• Bấm vào nút Add Number 1 and Number 2
• Kết quả xem xét sẽ thấy dòng sau 1 + 1 = 11

Như vậy đây là một kết quả sai, đáng nhẽ ra kết quả ta nhận được phải là 1 + 1 = 2 mới là kết quả đúng. Và đây là một lỗi của chương trình mà chúng ta phải sửa

Bước 2. Tạm dừng mã với một điểm dừng

---

DevTools 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 giá trị của tất cả các biến tại thời điểm đó. Hay nói cách khác được gọi là

if (inputsAreEmpty()) {

0 (điểm dừng). Please same try set any point stop

• Quay lại tab chương trình Demo và mở

  if (inputsAreEmpty()) {

  1 bằng cách nhấn vào

  if (inputsAreEmpty()) {

  2 (Mac) hoặc debugger0 (Windows, Linux)

• Nhấp vào tab Nguồn

• Chọn vào Event Listener Breakpoints, DevTools sẽ hiển thị ra một danh sách các danh mục sự kiện có thể mở rộng. Ví dụ như debugger1

• Sau đó nhìn xuống sự kiện Chuột và nhấp vào Mở rộng

• Đánh dấu chọn vào hộp kiểm debugger2

  
  )) Bạn có thể chỉnh sửa trên DevTools trước rồi sau đó sẽ chỉnh sửa mã sau đó cũng được.

  Trên đây là cách tìm lỗi bằng DevTools của Google, bài viết được lược dịch và lấy DEMO từ https. // giải mã. io/tìm hiểu cách gỡ lỗi-javascript-with-chrome-devtools-9514c58479db

  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. "chuỗi". 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