Các kỹ thuật gỡ lỗi dùng trong trình duyệt

Mẹo tận dụng trình gỡ lỗi của trình duyệt

• Điểm dừng có điều kiện nâng cao

  • Mở rộng chức năng của điểm dừng có điều kiện bằng cách dùng các biểu thức có tác dụng phụ
  • Có thể ghi log vào console mà không dừng thực thi thông qua logpoint/tracepoint
  • Dùng console.count để đếm số lần thực thi
  • Các trình duyệt chính đều hỗ trợ logpoint/tracepoint (tính đến tháng 5 năm 2020)

• Tận dụng cửa sổ theo dõi

  • Có thể dùng console.log trong cửa sổ theo dõi
  • Để thực thi biểu thức tại thời điểm DOM thay đổi, hãy đặt điểm dừng theo thay đổi DOM rồi thêm biểu thức theo dõi

• Theo dõi call stack

  • Theo dõi call stack của lời gọi hàm để tìm các lời gọi không khớp
  • Dùng console.trace trong điểm dừng có điều kiện để kiểm tra call stack

• Thay đổi hành vi của chương trình

  • Có thể thay đổi hành vi chương trình ngay lập tức ngay trong trình duyệt
  • Ghi đè tham số hàm để điều chỉnh hành vi

• Profiling hiệu năng đơn giản

  • Dùng API đo thời gian của console để đo thời gian thực thi mã
  • Dùng console.time('label') và console.timeEnd('label') để đo thời gian

• Tận dụng arity của hàm

  • Chỉ kích hoạt điểm dừng khi được gọi với số lượng đối số nhất định
  • Dùng để tìm sự không khớp về số lượng đối số khi gọi hàm

• Tận dụng thời gian

  • Chỉ kích hoạt điểm dừng sau khi đã trôi qua một khoảng thời gian nhất định kể từ lúc trang được tải
  • Bỏ qua điểm dừng trong một khoảng thời gian nhất định và chỉ kích hoạt sau đó

• Tận dụng CSS

  • Kích hoạt điểm dừng dựa trên giá trị CSS đã tính toán

• Chỉ dừng ở các lần gọi chẵn

  • Chỉ kích hoạt điểm dừng ở các lần thực thi thứ chẵn

• Dừng bằng lấy mẫu

  • Chỉ kích hoạt điểm dừng với các mẫu ngẫu nhiên của quá trình thực thi

• Không dừng ở một dòng cụ thể

  • Dùng tùy chọn "Never Pause Here" để tránh dừng tại một dòng cụ thể

• Tự động gán ID instance

  • Tự động gán ID duy nhất cho mỗi instance của class

• Bật/tắt theo cách lập trình

  • Dùng biến boolean toàn cục để bật/tắt điểm dừng có điều kiện theo cách lập trình

• Lời gọi class monitor()

  • Dùng lệnh monitor của Chrome để theo dõi lời gọi method của class

• Gọi hàm và gỡ lỗi

  • Gọi debugger trong console rồi gọi hàm để gỡ lỗi

• Dừng thực thi khi URL thay đổi

  • Dừng thực thi trước khi URL thay đổi trong ứng dụng trang đơn

• Gỡ lỗi khi đọc thuộc tính

  • Kích hoạt điểm dừng mỗi khi một thuộc tính của đối tượng được đọc

• Dùng copy()

  • Dùng API console copy() để sao chép thông tin trực tiếp từ trình duyệt vào clipboard

• Gỡ lỗi HTML/CSS

  • Dùng console JS để chẩn đoán các vấn đề HTML/CSS
  • Kiểm tra DOM khi JS bị vô hiệu hóa
  • Kiểm tra các phần tử DOM chỉ xuất hiện theo điều kiện
  • Ghi lại snapshot DOM
  • Theo dõi phần tử đang được focus
  • Tìm các phần tử dùng phông chữ đậm
  • Tham chiếu phần tử đang được chọn hiện tại
  • Theo dõi sự kiện

Ý kiến của GN⁺

Điểm quan trọng nhất của bài viết này là nó cung cấp nhiều kỹ thuật và mẹo giúp nhà phát triển gỡ lỗi mã hiệu quả hơn và giải quyết vấn đề bằng trình gỡ lỗi của trình duyệt. Thông tin này rất hữu ích cho các lập trình viên phần mềm và đặc biệt thú vị vì có thể tiết kiệm thời gian khi theo dõi các lỗi phức tạp hoặc xử lý vấn đề hiệu năng.

[GN⁺]

Ý kiến trên Hacker News

• Sự phát triển của các công cụ gỡ lỗi tích hợp trong trình duyệt

  • Các công cụ gỡ lỗi tích hợp trong trình duyệt đã phát triển rất mạnh trong vài thập kỷ qua.
  • Với tư cách là một người làm JavaScript lâu năm, xin cảm ơn tất cả những ai đã giúp việc gỡ lỗi mã trong trình duyệt trở nên trực quan.
  • Khi làm backend hoặc làm việc với các ngôn ngữ khác, lại thấy nhớ hệ sinh thái công cụ gỡ lỗi của trình duyệt hiện đại.

• Cách tận dụng câu lệnh debugger

  • Việc dùng câu lệnh debugger (debugger;) là cách duy nhất để vượt qua stack đệ quy trong trình gỡ lỗi của Chrome.
  • Có nhắc đến trường hợp dùng bẫy gỡ lỗi để ngăn người truy cập phân tích trang chủ đã bị làm rối mã của mình.

• Khó khăn khi gỡ lỗi backend NodeJS

  • Với tư cách là lập trình viên Python/Elixir, thường xuyên dùng pdb.set_trace()/IEx.pry().
  • Đã tiếp quản một backend NodeJS phức tạp và gặp khó khăn khi làm việc mà không có công cụ gỡ lỗi phù hợp.
  • Cuối cùng phải quay lại kiểu gỡ lỗi bằng console.log, tạo cảm giác rất thô sơ.
  • Bày tỏ sự ngạc nhiên trước việc thiếu một REPL gỡ lỗi phù hợp và xin được giúp đỡ.

• Đề xuất Werkzeug

  • Khuyến nghị dùng Werkzeug cho phát triển backend Django.
  • Mỗi khi có ngoại lệ xảy ra, công cụ này cho phép dùng shell "PDB" ngay trong trình duyệt.

• Cách truy cập biến cục bộ của IIFE

  • Đặt câu hỏi về cách truy cập các biến cục bộ của biểu thức hàm gọi ngay (IIFE).
  • Tìm cách để trình gỡ lỗi làm được điều này mà không cần dừng mã bên trong phạm vi IIFE.

• Cách gỡ lỗi thông qua chuỗi UI

  • Bắt đầu ghi lại các request mạng trong bảng Network.
  • Dùng tìm kiếm ở thanh bên trái để nhập đoạn mã/chuỗi UI cần tìm.
  • Tìm kết quả trong các file js chunk đã bundle, rồi mở trong "Sources" để đặt câu lệnh debugger.

• Gỡ lỗi bằng breakpoint có điều kiện

  • Đặt câu hỏi về cách biến {configOption: true} thành {get configOption() { debugger; return true; }}.

• Tính năng chỉ có trên Chrome là 'Monitor Events for Element'

  • Có nhắc đến tính năng 'Monitor Events for Element' và việc đây là tính năng chỉ có trên Chrome.
  • Tò mò không biết có lựa chọn thay thế nào cho Firefox hay không.

• Sự thiếu vắng của API queryObjects

  • Nhắc đến API queryObjects, thứ có thể trả về danh sách mọi đối tượng được tạo bởi một constructor cụ thể.
  • Ví dụ, có thể dùng queryObjects(Function) để lấy danh sách tất cả các hàm đang có trên heap.

• Khó khăn khi dùng watch variable

  • Gặp khó khăn trong việc làm cho watch variable hoạt động.
  • Có vẻ như chỉ có thể theo dõi biến toàn cục, nhưng vì nó không hoạt động như mong đợi nên cuối cùng lại phải ghi đầy log ra ngoài.
  • Nêu ý kiến rằng console nên có thêm một UI kiểu Data.gui để xem và thử nghiệm biến cũng như các giá trị cấu hình, đồng thời cung cấp liên kết CodePen liên quan.