Javascript 객체의 실시간 시각화를위한 도구

Question

많은 사람들과 마찬가지로, 내 뇌는 읽기, 쓰기 및 작성을위한 시각적 인 정보 (텍스트가 아닌 정보)와 잘 작동하는 경향이 있습니다.

어떤면에서 현재 실행중인 자바 스크립트 환경을 시각적으로 "볼"수있는 도구는 무엇입니까?

한 가지 명백한 예는 현재 메모리에있는 각 개체를 나타 내기 위해 하나의 상자를 화면 (또는 HTML 페이지)에 두는 것입니다. 상자에는 현재 개체에 바인딩 된 변수 인 레이블이 포함될 수 있습니다. pubsub 라이브러리를 사용하는 경우 상자가 나타내는 개체가 구독하는 메시지를 "가져옵니다"때 잠시 깜박일 수 있습니다. 상자를 클릭하면 해당 객체에 대한 모든 public 메소드 목록이 표시되고 메소드 서명 주석이 있으면 해당 매개 변수의 이름이 표시됩니다.

Javascript에있는이 항목과 다소 유사하며 현재 실행중인 프로세스에서 작동합니다. 환영합니다! 또한, 기존 코드에 추가 할 수있는 javscript 라이브러리 형태 여야합니다. 그러나 그림과 같이 일부 IDE 또는 브라우저 플러그인에서 발견되는 이러한 종류의 도구 예제는 환영합니다.

Answer 1

상자를 사용하지 않더라도 화면의 공간을 절약 할 수는 있겠지만 방화범을 쏜 적이 있습니까? 그래픽 상자가 아니지만 확장 가능/접을 수있는 텍스트 요소를 사용하여 응용 프로그램을 시각화하는 데 도움이됩니다.

그리고 JS에 국한되지 않습니다. 요소 선택기를 사용하여 html 요소를 선택하고 JS가 DOM을 실제로 변경하는 방법을 확인할 수 있습니다. 그래서 초점을두고 텍스트 상자에 CSS를 적용 해 보겠습니다. 당신은 파이어 폭스를 사용하여 실시간으로 볼 수 있습니다 ...

정말 정말 좋은 도구입니다. JS 라인을 한 줄씩 디버깅하고, 변수에 시계를두고 (모든 메소드와 값을보고, 실시간으로 값이 어떻게 변하는 지 보거나, 프로그램이 실행될 때 직접 변경하는 방법을!), html과 js가 어떻게 동작하는지 살펴보십시오. 읽고 거의 실시간으로 영향을받습니다 ... 또한 다른 언어의 디버깅을 돕기 위해 플러그인이 있습니다 (또는 적어도 사용 되곤합니다), 특히 FLASH/SWF의 추적을 볼 수있는 actionscript 플러그인을 상기합니다 개체가 발생했을 때와 PHP 플러그인도 있습니다.

시도해 보지 않으셨습니까? 가야 해.

더 낮은 수준의 내용에 더 관심이 있다면; 다음 HTTP 호출과 같이 매우 자세하게 설명합니다. 느린 연결을 복제하는 것; 당신의 user-agent를 위장한 것입니다. (대부분의 브라우저에서이 방법을 사용하지 않아도됩니다!) Fiddler2를 시도해보십시오 ... 자주 사용하지는 않지만 AJAX 나 http를 다루기 힘들 때 , 앞뒤로 많은 전화로, 그것은 생명의 은인이었습니다.

희망이 도움이됩니다.