Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách tìm định nghĩa hàm JavaScript trong Chrome DevTools

Để tìm nhanh định nghĩa (khai báo) của một hàm JavaScript trong Google Chrome, hãy sử dụng Chrome DevTools với các cách sau:

Cách 1: Tìm kiếm toàn cục (Global Search) - Nhanh nhất

  1. Mở trang web cần debug.
  2. Mở DevTools: F12 hoặc Ctrl+Shift+I (Win/Linux) / Cmd+Option+I (Mac).
  3. Chuyển sang tab Sources (Nguồn).
  4. Nhấn Ctrl+Shift+F (Win/Linux) / Cmd+Option+F (Mac) để mở Search in all files (Tìm kiếm trong tất cả file).
  5. Bật biểu thức chính quy (Regex): Click icon .* (bật/tắt Regex).
  6. Nhập tên hàm cần tìm (ví dụ: myFunction) > Enter.
  7. Kết quả hiển thị danh sách file và dòng code chứa tên hàm. Click vào kết quả để nhảy đến định nghĩa.

Cách 2: "Go to Definition" (Đi đến định nghĩa) - Khi đang ở file source

  1. Trong tab Sources, mở file JS chứa lời gọi hàm.
  2. Đặt con trỏ chuột vào tên hàm được gọi.
  3. Nhấn Ctrl + Click (Win/Linux) hoặc Cmd + Click (Mac) vào tên hàm.
  4. DevTools sẽ nhảy ngay đến dòng khai báo hàm (nếu source map chính xác).

Cách 3: Console - Đối với hàm toàn cục (Global Function)

  1. Chuyển sang tab Console.
  2. Gõ tên hàm không có dấu ngoặc: myFunction > Enter.
  3. Console hiển thị định nghĩa hàm (nếu là function declaration/expression gán cho biến global). Click vào tên file:dòng bên cạnh để mở trong Sources.

Cách 4: Breakpoint + Call Stack (Khi đang debug)

  1. Đặt breakpoint tại dòng gọi hàm.
  2. Khi code dừng, xem panel Call Stack (Ngăn xếp gọi) ở bên phải (tab Sources).
  3. Click vào frame của hàm cần tìm -> DevTools nhảy đến định nghĩa.

Mẹo hữu ích

  • Pretty Print (Làm đẹp code minify): Trong tab Sources, mở file JS nén (min.js), click icon { } (dấu ngoặc nhọn) ở góc dưới trái editor để format đẹp, dễ đọc, dễ tìm hàm.
  • Source Maps: Đảm bảo project build có source map (.map) để DevTools map code minify về source gốc (TypeScript, ES6+, bundle).
  • Tìm trong file hiện tại: Trong tab Sources, mở file -> Ctrl+F (Cmd+F) tìm tên hàm trong file đó.
  • Snippets: Lưu code tìm kiếm hay dùng vào Snippets (tab Sources >> Snippets) để chạy nhanh.

Lưu ý

  • Hàm ẩn danh (anonymous function) hoặc arrow function gán cho biến không hiện tên hàm trong stack trace/global search dễ dàng. Nên đặt tên hàm (Named Function Expression) cho dễ debug: const myFunc = function myFuncName() {}.
  • Code trong eval(), new Function(), hoặc module động có thể không tìm thấy bằng search thông thường.

Tóm lại: Nhanh nhất: Ctrl+Shift+F (Search all files) + Regex. Chính xác khi debug: Ctrl+Click trên tên hàm hoặc Call Stack. Luôn bật Pretty Print cho file minify.