Browserify에서 js를 디버깅하는 방법
JS-JMS-WEB
새 프로젝트에 browserify를 사용하고 있습니다. 지금까지 정말 잘 작동합니다.
그래도 큰 문제가 하나 있습니다. 어떻게 각 js 파일을 개별적으로 디버깅 할 수 있습니까? 모든 파일을 함께 묶고 오류가 발생하면 묶음을 가리 킵니다.
크롬 및 소스 맵을 사용하고 있지만 실제로 디버깅에 도움이되지 않습니다.
어떤 아이디어?
업데이트 : 추가 정보 :
package.json에서이 명령을 사용하고 있습니다.
"start": "watchify scripts/main.js -o scripts/bundle.js --debug",
위에 표시된 것과 같이 이상적이지 않은 오류가 발생합니다.
내 소스 맵이 켜져 있다고 생각합니까?
켈리 J 앤드류스
코드없이 브라우저 화를 위해 명령 줄 도구를 사용하는 방법을 정확히 모르겠지만 debug.
--debug -d 파일을 개별적으로 디버깅 할 수있는 소스 맵을 활성화합니다.
browserify main.js -o bundle.js --debug
CLI 도구에 대한 자세한 내용은 https://github.com/substack/node-browserify#usage 에서 확인할 수 있습니다.
편집 이것에 대해 좀 더 자세히 ParseError살펴본 후 - 특히 여기에서 발생한 문제 는-Browserify가 실제로 적절한 디버그 단계에 도달하지 않음을 의미합니다. 실제로 생각하지 못했지만 이것은 완벽하게 이해되었습니다.
이를 테스트하기 위해 두 개의 간단한 파일을 만듭니다.
a.js
module.exports = function(a) {
return a;
}
main.js
var a = require('./a.js');
console.log(a("something"));
나는 다음 실행 browserify하여 watchify와 npm스크립트
"start": "watchify main.js -o bundle.js --debug"
브라우저에서 스크립트를 사용하면 모든 것이 잘 작동했습니다. 예상대로 콘솔에 기록되었습니다. 그런 다음 a.js오타 로 편집 했습니다.
a.js
module.exports = function(a) {
return a---
}
브라우저 및 watchify 오류 줬어요는 위에 표시된 : path/to/file/a.js:3 ParseError: Unexpected Token.
Browserify는 파일을 제대로 컴파일 할 수 없으므로 오류가 발생합니다. 빌드하는 동안 콘솔에 표시되어야합니다.
--debug플래그가 예상대로 작동하는지 테스트하기 위해 코드를 다시 수정했습니다.
a.js
module.exports = function(a) {
return a('something');
}
여기서 기대하는 TypeError것은 함수가 이제 함수일 것으로 예상 a하기 때문입니다.
이제 브라우저의 콘솔에 다음이 표시됩니다. Uncaught TypeError: a is not a function __________ a.js:2
구문 분석 문제를 수정 browserify --debug하면 다시 한 번 예상대로 작동하기 시작합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Next.js에서 getStaticProps (및 getStaticPaths)를 디버깅하는 방법
- 2
Mac에서 Docker를 사용하여 디버깅하는 방법
- 3
Visual Studio Code에서 Lua를 디버깅하는 방법
- 4
VSCode에서 Deno를 디버깅하는 방법
- 5
Chrome 브라우저에서 AngularJS를 디버깅하는 방법
- 6
Visual Studio 2013에서 QFixed를 디버깅하는 방법
- 7
이 내 클래스를 PHP에서 디버깅하는 방법
- 8
Excel Index 함수에서 #REF를 디버깅하는 방법
- 9
Twisted에서 Protocol.dataReceived를 디버깅하는 방법
- 10
WAITING 상태에서 Java Thread를 디버깅하는 방법
- 11
HTML에서 디버깅하는 방법
- 12
Linux에서 USB 문제를 이해하고 디버깅하는 방법
- 13
Kubernetes에 배포 된 Dask Gateway에서 CommClosedError를 디버깅하는 방법
- 14
Visual Studio 2013에서 Azure 에뮬레이터를 디버깅하는 방법
- 15
"내부 서버 오류"를 디버깅하는 방법은 무엇입니까?
- 16
각도 프로젝트에서 깨진 Lint를 디버깅하는 방법
- 17
Rust에서 "non-assert"디버깅 코드를 작성하는 방법
- 18
PyPy에서 GC를 디버깅하는 방법은 무엇입니까?
- 19
Matplotlib에서 산점도를 디버깅하는 방법은 무엇입니까?
- 20
IDE에서 SWF를 디버깅하는 방법은 무엇입니까?
- 21
Plone에서 Zope의 번역 기계를 디버깅하는 방법
- 22
C에서 Vigenere 암호를 디버깅하는 방법은 무엇입니까?
- 23
POST 인 SSL REST 서비스 코드를 디버깅하는 방법
- 24
서버에서 시작할 때 실행되지 않는 sshd를 디버깅하는 방법
- 25
레일의 태스크 서버에서 실행되는 코드를 디버깅하는 방법
- 26
.vsix 패키지에 디버깅 기호를 포함하는 방법
- 27
cfWindow에서 디버깅 정보를 얻는 방법
- 28
ArangoDB에서 자세한 디버깅 정보를 얻는 방법
- 29
RoR 앱에서 백그라운드 비디오 용 HTML5 / CSS를 디버깅하는 방법
몇 마디 만하겠습니다