Tìm định nghĩa hàm JavaScript trong Chrome

Công cụ dành cho nhà phát triển của Chrome hoạt động, nhưng một điều họ dường như không có (mà tôi có thể tìm thấy) là một cách để tìm định nghĩa của hàm JavaScript. Điều này sẽ rất tiện cho tôi vì tôi đang làm việc trên một trang web có nhiều tệp JS bên ngoài. Chắc chắn grep giải quyết điều này nhưng trong trình duyệt sẽ tốt hơn nhiều. Ý tôi là, trình duyệt phải biết điều này, vậy tại sao không phơi bày nó? Những gì tôi mong đợi là một cái gì đó như:

• Chọn 'Kiểm tra phần tử' từ trang, đánh dấu dòng trong tab Thành phần
• Nhấp chuột phải vào dòng và chọn 'Chuyển đến định nghĩa hàm'
• Kịch bản đúng được tải trong tab ScScript và nó nhảy đến định nghĩa hàm

Trước hết, chức năng này có tồn tại và tôi chỉ thiếu nó?

Và nếu không, tôi đoán điều này sẽ đến từ WebKit, nhưng không thể tìm thấy bất cứ điều gì cho các yêu cầu tính năng của Công cụ dành cho nhà phát triển hoặc Bugzilla của WebKit .

Hãy nói rằng chúng tôi đang tìm kiếm chức năng có tên foo:

1. (mở Chrome dev-tools),
2. Windows: ctrl+ shift+ Fhoặc macOS: cmd+ optn+ F. Điều này mở ra một cửa sổ để tìm kiếm trên tất cả các tập lệnh.
3. đánh dấu vào hộp kiểm "Biểu thức chính quy",
4. tìm kiếm foo\s*=\s*function(tìm kiếm foo = functionvới bất kỳ số lượng khoảng trống giữa ba mã thông báo đó),
5. nhấn vào một kết quả trả về.

Một biến thể cho định nghĩa hàm là function\s*foo\s*\(cho function foo(với bất kỳ số lượng khoảng trống giữa những ba thẻ.

Điều này đã hạ cánh trên Chrome vào ngày 2012-08-26 Không chắc chắn về phiên bản chính xác, tôi nhận thấy nó trong Chrome 24.

Một ảnh chụp màn hình đáng giá một triệu từ:

Tôi đang kiểm tra một đối tượng với các phương thức trong Bảng điều khiển. Nhấp vào "Hiển thị định nghĩa chức năng" sẽ đưa tôi đến vị trí trong mã nguồn nơi chức năng được xác định. Hoặc tôi chỉ có thể di chuột qua function () {từ để xem thân hàm trong một chú giải công cụ. Bạn có thể dễ dàng kiểm tra toàn bộ chuỗi nguyên mẫu như thế này! CDT chắc chắn đá !!!

Hy vọng tất cả các bạn tìm thấy nó hữu ích!

Bạn có thể in chức năng bằng cách đánh giá tên của nó trong bảng điều khiển, như vậy

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

điều này sẽ không hoạt động đối với các chức năng tích hợp, chúng sẽ chỉ hiển thị [native code]thay vì mã nguồn.

EDIT : điều này ngụ ý rằng chức năng đã được xác định trong phạm vi hiện tại.

Cập nhật 2016 : trong Chrome Phiên bản 51.0.2704.103

Có một Go to memberphím tắt (được liệt kê trong settings > shortcut > Text Editor). Mở tệp chứa chức năng của bạn (trong sourcesbảng điều khiển của DevTools) và nhấn:

ctrl+ shift+O

hoặc trong OS X:

⌘+ shift+O

Điều này cho phép liệt kê và tiếp cận các thành viên của tập tin hiện tại.

Một cách khác để điều hướng đến vị trí của định nghĩa hàm sẽ là ngắt trình gỡ lỗi ở một nơi nào đó bạn có thể truy cập hàm và nhập tên hàm đủ điều kiện trong bảng điều khiển. Điều này sẽ in định nghĩa hàm trong bảng điều khiển và đưa ra một liên kết mà khi nhấp vào sẽ mở vị trí tập lệnh nơi hàm được xác định.

Các trình duyệt khác nhau làm điều này khác nhau.

1. Đầu tiên mở cửa sổ giao diện điều khiển bằng cách nhấp chuột phải vào trang và chọn "Kiểm tra phần tử" hoặc nhấn F12.

2. Trong bảng điều khiển, nhập ...

   • Firefox

     functionName.toSource()

   • Trình duyệt Chrome

     functionName

trong bảng điều khiển Chrome:

debug(MyFunction)
MyFunction()

Tôi tìm thấy cách nhanh nhất để xác định chức năng toàn cầu chỉ đơn giản là:

1. Chọn tab Nguồn .
2. Trong khung Watch bấm + và gõ cửa sổ
3. Tài liệu tham khảo chức năng toàn cầu của bạn được liệt kê đầu tiên, theo thứ tự abc.
4. Nhấp chuột phải vào chức năng bạn quan tâm.
5. Trong menu bật lên chọn Hiển thị định nghĩa chức năng .
6. Khung mã nguồn chuyển sang định nghĩa hàm đó.

Trong Google chrome, công cụ phần tử Kiểm tra, bạn có thể xem bất kỳ định nghĩa chức năng Javascript nào.

1. Nhấp vào tab Nguồn. Sau đó chọn trang chỉ mục. Tìm kiếm chức năng.

2. Chọn chức năng sau đó Nhấp chuột phải vào chức năng và chọn "Đánh giá văn bản đã chọn trong bảng điều khiển."

Nếu bạn đã gỡ lỗi, bạn có thể di chuột qua hàm và chú giải công cụ sẽ cho phép bạn điều hướng trực tiếp đến định nghĩa hàm:

Đọc thêm :

• Chrome DevTools> Tham khảo gỡ lỗi JavaScript

Tôi gặp vấn đề tương tự khi tìm nguồn gốc của phương thức. Tên đối tượng là myTreevà phương thức của nó là load. Tôi đặt một điểm dừng trên dòng mà phương thức được gọi. Bằng cách tải lại trang, việc thực thi dừng lại tại thời điểm đó. Sau đó, trên bảng điều khiển DevTools, tôi đã gõ đối tượng cùng với tên phương thức, tức là myTree.loadvà nhấn Enter. Định nghĩa của phương pháp đã được in trên bàn điều khiển:

Ngoài ra, bằng cách nhấp chuột phải vào định nghĩa, bạn có thể đi đến định nghĩa của nó trong mã nguồn: