Trình duyệt đối tượng JavaScript?

Question

Gần đây tôi đã được giao nhiệm vụ ghi lại một ứng dụng JavaScript lớn mà tôi đã duy trì một thời gian. Vì vậy, tôi có kiến ​​thức tốt về hệ thống.

Nhưng do kích thước tuyệt đối của ứng dụng, có thể sẽ mất rất nhiều thời gian ngay cả với kiến ​​thức trước xung quanh mã và chính mã nguồn ở dạng không nén. Vì vậy, tôi đang tìm kiếm các công cụ có thể giúp tôi khám phá các lớp học và các phương pháp và mối quan hệ của họ trong JavaScript và nếu có thể, hãy ghi lại chúng trên đường đi, liệu có sẵn có sẵn hay không? Không.

Một thứ như trình duyệt đối tượng trong VS sẽ đẹp, nhưng bất kỳ công cụ nào giúp tôi hoàn thành công việc nhanh hơn cũng sẽ làm được.

Cảm ơn!

Answer 1

DOM tab cho phép bạn duyệt nội dung của đối tượng toàn cầu window và bạn có thể kiểm tra một đối tượng cụ thể bằng cách nhập inspect(whatever) vào dòng lệnh.

Bạn sẽ không thể sử dụng nó để phát hiện mối quan hệ trừ khi một cá thể của một đối tượng giữ một thể hiện của một đối tượng liên quan, nhưng đó là khởi đầu.

Bạn cũng có thể sử dụng trình đơn Tùy chọn trên tab DOM để hạn chế những gì được hiển thị cho các hàm và thuộc tính do người dùng xác định, điều này sẽ giúp giảm sự lộn xộn.

Answer 2

Firebug + uneval (obj) là một mẹo đơn giản thường hữu ích.

Answer 3

Hãy xem Aptana, họ có một phác thảo có thể giúp bạn xác định các đối tượng và thời gian nào đó mối quan hệ của chúng.

Answer 4

Chúng tôi không biết ứng dụng JS này có được thiết kế để chạy trong trình duyệt Web hay không.
Nếu có, như được khuyên, Firebug (phần mở rộng của Firefox) tuyệt vời khi gỡ lỗi JS và khám phá Dom.
Ở phía bên IE, bạn có một số công cụ như IEDocMon, Web Accessibility Toolbar (nó có nhiều hơn tên của nó) hoặc Fiddler (không liên quan đến câu hỏi của bạn, nhưng vẫn là một công cụ tốt để có).

Answer 5

Firebug (Firefox)/Dragonfly (Opera) có thể giúp bạn xem các đối tượng trong thời gian thực

Aptana/JS/UML (Eclipse) có thể giúp mối quan hệ của các đối tượng

Answer 6

Tôi thấy rất nhiều người nói về việc kiểm tra DOM trong Firebug. Tuy nhiên, từ câu hỏi của bạn có vẻ như bạn muốn một cái gì đó như jsdoc? chỉ cần thêm thông tin kiểu và lớp thông qua các chú thích và jsdoc tạo ra các tài liệu bao gồm các mối quan hệ lớp. http://jsdoc.sourceforge.net/

Google có một ngã ba của nó với tính năng bổ sung http://code.google.com/p/jsdoc-toolkit/

UPDATE: Nó không phải là một ngã ba, đó là một viết lại bởi nhà phát triển mà viết jsdoc ban đầu như một kịch bản perl. Nó nhằm mục đích thích nghi hơn, do đó bạn có thể sử dụng bất cứ kiểu thừa kế/sự kiện/thuộc tính nào mà bạn muốn. Một tính năng khác là nó cho phép bạn sửa đổi các mẫu được sử dụng để tạo HTML theo cách đơn giản hơn nhiều.

Answer 7

Đây là câu hỏi cũ nhưng hãy để tôi trả lời câu hỏi.

1. Sử dụng IDE. Môi trường phát triển tích hợp đã được thực hiện để nhảy xung quanh nhanh chóng trong số các mã. Các tính năng chính mà bạn sẽ thực hiện trong quá trình thăm dò đang xem cấu trúc tệp hoặc đường viền, nhảy đến khai báo hoặc sử dụng và tìm kiếm toàn bộ dự án cho tất cả các trường hợp của chuỗi. Nếu bạn đang sử dụng WebStorm, hãy thiết lập phạm vi tùy chỉnh cho các tệp ngoại trừ các tệp được tạo và node.js để hỗ trợ tìm kiếm.

2. Chạy 'npm la | less 'liệt kê tất cả các mô đun phụ thuộc của bạn với một mô tả dòng. Bạn có thể chưa bao giờ thấy moment.js và không bao giờ cần phải đọc tài liệu, nhưng dành thời gian để đọc một bản tóm tắt một dòng của nó là đáng giá. Nếu bạn cần thêm thông tin về công cụ hơn tóm tắt một dòng, hãy tìm cụm từ trên SlideShare. Trang trình bày nhanh hơn ReadTheDocs.

3. Làm tài liệu một chút khi bạn đi. Tôi là một fan hâm mộ của việc buộc mọi người sử dụng máy tính xách tay liên tục chứ không phải là giấy cào. Ngoài ra, tôi thấy việc thêm một dòng chú thích cho mỗi tệp JavaScript là đáng giá. Bạn muốn biết những gì nên ở trong mỗi thư mục của dự án của bạn. Tôi cũng khuyên bạn nên xây dựng một bảng thuật ngữ về ý nghĩa chính xác của các thuật ngữ tên miền trong hệ thống của bạn, ví dụ: "công việc" trong hệ thống của bạn là gì.

4. Cuối cùng, bạn có thể cần phải kích hoạt ứng dụng trong trình gỡ lỗi và bắt đầu bước qua các phần của nó. Hầu hết các dự án lớn đều có giá trị từ các lập trình viên ở các cấp độ kỹ năng và động lực khác nhau.

Bạn đang nhắm đến một mức độ "toàn vẹn khái niệm" (để báo cho Yourdon) hoặc "bẻ" phần mềm (để trích dẫn Heinlien). Phải mất một thời gian, không thể bỏ qua, và có thể được thực hiện hiệu quả.