Firebug에서 축소 된 JS를 어떻게 디버깅 할 수 있습니까?
엄청나게 많은 축소 된 JS 파일이 포함 된 웹 페이지가 있습니다. 웹 페이지는 내 로컬 네트워크에서 완벽하게 작동하지만 스테이징시 JS 오류가 발생합니다. JS에 문제가 있으며 디버깅하고 싶지 않습니다. Firebug의 스크립트 태그에 JS를로드하면 하나의 긴 수평선에 나타납니다. Firebug에 디버깅을 위해 스크립트를 확장하거나 아름답게 만드는 방법이 있습니까? 나는 jsbeautifier를 사용할 수 있다는 것을 알고 있지만 그들은 나를 돕지 않을 것입니다. 확장 된 파일을 CDN에 업로드 할 수 없어 CDN 사용 목적에 위배됩니다.
주목해야 할 점,
a) CDN에서 JS를 제공하는 상자를 제어 할 수 없다고 언급했습니다.
b) 미화 등을 사용할 수 있지만 런타임에 스크립트를 디버깅하는 데 도움이됩니까? IMHO, no
c) NDA 및 기타 법적 사항에 구속되어 스크립트를 공유 할 수는 없지만 일반적인 문제이므로 축소 된 jQuery로 발생할 수 있습니다.
- 스크립트를 아름답게
- / etc / hosts 또는 로컬 DNS에 CDN 호스트를 추가 하여 자체 웹 서버로 확인합니다.
- 미화 버전과 해당 웹 서버에 필요한 모든 것을 호스팅하십시오.
- Firefox와 Chrome (이 편집 시점의 버전) 모두
{}검사기에서 사용할 수 있는 버튼을 사용 하여 아름다운 스크립트를 지원 합니다.
업데이트 : JavaScript를 아름답게하는 방화범 확장이 있습니다.
https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/
Firefox 12.0에서 완벽하게 작동합니다.
그것을 발견 한이 답변에 대한 크레딧 .
축소 된 파일을로드하고 {}하단 의 버튼을 누르기 만하면 즉시 미화되어 중단 점 및 기타 디버깅이 가능합니다. (Chrome에서도 마찬가지)
이것은 일반적인 문제이며 Chrome 개발 팀은 최근 소스 맵이라고 부르는 우아한 솔루션을 내놓았 습니다. 자세한 내용은 http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ 를 참조 하세요 . 나는 당신이 (그리고 나머지 우리)가 부르짖었던 것과 정확히 일치한다는 것을 알게 될 것이라고 생각합니다! :)
이것은 더 많은 해결 방법이지만 도움이 될 수 있습니다. 아이디어는 서버에서 오는 파일을 컴퓨터의 파일로 대체한다는 것입니다.
이것은 모든 브라우저에서 작동합니다.
처음에는 약간의 설정이 필요하지만 (15 분 정도) 매우 편리 할 수 있습니다.
또한 라이브 / 프로덕션 환경에서 버그 수정을 테스트하는 데 도움이 될 수 있습니다.
- Fiddler (웹 디버깅 프록시)를 가져 와서 설치하고 실행합니다.
http://www.fiddler2.com/fiddler2/(Fiddler
확장을 얻으려면 설치 후 브라우저를 다시 시작) - HTTPS 웹 사이트를 디버깅하는 경우 먼저 http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp를 확인
하십시오. - 이제부터는 Fiddler (왼쪽의 "웹 세션"창)에 JS 파일을 포함하여 브라우저에서 만든 모든 다운로드가 표시됩니다.
그렇지 않은 경우 다음을 확인하십시오. Fiddler가 세션을 표시하지 않음 - 목록에서 디버그 할 파일을 찾습니다 (Ctrl + F 작동).
- 파일을 클릭하십시오. 다음 중 하나 :
- 인스펙터 창 (textView 탭)에서 파일 내용을 가져 와서 아름답게 만들고 로컬 컴퓨터의 파일에 저장합니다.
- 또는 소스 코드가 포함 된 파일에 액세스 할 수 있습니다 (예 : 소스 제어에서).
- 자동 응답 탭 (왼쪽 상단 창)으로 이동합니다.
"자동 응답 활성화"체크 상자를 선택하십시오.
"일치하지 않는 요청 통과"확인란을 선택합니다. - 왼쪽 창에서 오른쪽 창으로 파일을 드래그합니다 (하단에 규칙 편집기 미리 채우기).
- 로컬 파일의 경로로 다른 필드를 설정하십시오.
- 저장 버튼을 클릭하십시오
- 페이지를 다시로드하고 디버깅 세션을 즐기십시오.
Fiddler는 더 많은 작업을 수행 할 수 있지만이 사용 사례는 초기 질문에 대한 답변입니다.
변화를 고려하십시오!
Firefox w / Firebug는 거의 1 년 동안 제가 가장 좋아하는 JavaScript 디버깅 방법 이었지만 최근에는 훨씬 더 우수한 Google-Chrome의 개발자 도구로 옮겼습니다.
Chrome은 자바 스크립트 리소스의 On-The-Fly (내장 기능) 미화를 지원합니다.
일단 아름답게 만들어지면 자바 스크립트 리소스 파일을 자유롭게 디버깅 할 수 있습니다. 웹 서버에서 아름답게 다운로드 된 "기본적으로"다운로드 되었기 때문입니다. 중단 점은 줄 번호를 클릭하여 설정합니다.
One of the most extremely powerful feature,
Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that.
Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
Try It!
Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.
I happen to use http://jsbeautifier.org/ myself and it works fine, but search for others and use one that suits your needs.
Caveat: You still won't be able to get meaningful local variable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then all variables and functions and properties are mangled (not only local ones).
Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.
Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It can be done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.
JavaScript에 중단 점을 배치하면 디버깅이 훨씬 더 쉬워 지지만 코드가 이미 프로덕션 단계에 들어갔다면 아마도 축소되었을 것입니다. 축소 된 코드를 어떻게 디버깅 할 수 있습니까? 유용하게도 일부 브라우저에는 자바 스크립트 축소를 해제하는 옵션이 있습니다.
Chrome 및 Safari에서는 '스크립트'탭을 선택하고 관련 파일을 찾은 다음 하단 패널에있는 "{}"(예쁜 인쇄) 아이콘을 누르기 만하면됩니다.
Internet Explorer에서 스크립트 선택 드롭 다운 옆에있는 도구 아이콘을 클릭하여 JavaScript 형식 지정 옵션을 찾습니다.
Opera는 축소 된 JavaScript를 자동으로 예쁘게 만듭니다. 출처
참고 URL : https://stackoverflow.com/questions/5386826/how-can-i-debug-a-minified-js-in-firebug
'Programing' 카테고리의 다른 글
| MYSQL 파티셔닝이란? (0) | 2020.12.03 |
|---|---|
| toRad () 자바 스크립트 함수에서 오류 발생 (0) | 2020.12.03 |
| 롤링 분산 알고리즘 (0) | 2020.12.02 |
| WCF 서비스 클라이언트 : 콘텐츠 유형 text / html; (0) | 2020.12.02 |
| 크롬의 sqlite (0) | 2020.12.02 |