programing

jsfiddle의 js를 디버깅하는 방법

abcjava 2023. 2. 20. 23:49
반응형

jsfiddle의 js를 디버깅하는 방법

이 jsfiddle을 보고 있습니다.http://jsfiddle.net/carpasse/mcVfK/ 문제가 아니라 javascript를 통해 디버깅하는 방법을 알고 싶습니다.디버거 명령을 사용하려고 했는데 소스 탭에서 찾을 수 없습니다.이걸 어떻게 디버깅할 수 있는지 아세요?

바이올린의 코드:

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

JavaScript는 Chrome의 [소스(Sources)]탭의 fiddle.jshell.net 폴더에서 실행됩니다.아래 Chrome 스크린샷에 표시된 인덱스 파일에 중단점을 추가할 수 있습니다.

Chrome에서의 JSFiddle 디버깅

여기에 이미지 설명 입력

를 사용합니다.debugger;코드에 기술되어 있습니다.브라우저가 이 문에 중단점을 삽입하면 브라우저의 디버거에서 계속할 수 있습니다.

적어도 chrome과 firefox에서는 동작합니다.https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
    // *** Debugger invoked here
    debugger;
    $routeProvider.
            when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
            when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
            when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
            when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
            otherwise({redirectTo: '/home'});
}]);

언급할 가치가 있는 것.만약 당신이 크롬 개발 도구를 사용한다면.++shiftF를 누르면 소스 내의 모든 파일을 검색할 수 있습니다.

다른 답변과 함께요.

콘솔에 디버깅 정보를 쓰는 것만으로 도움이 되는 경우가 많습니다.

console.log("debug information here");

출력은 브라우저 개발 도구 콘솔에서 사용할 수 있습니다.일반적인 자바스크립트 코드에서 로그된 것처럼요
이것은 꽤 간단하고 효과적이다.

코드에 디버거 문을 추가하고 보서에서 "개발자 도구"를 사용하도록 설정합니다.JSFiddle에서 코드를 실행하면 디버거가 히트합니다!

위의 답변 중 하나가 작동하지만, 중단점을 원하는 행에 키워드 디버거를 추가하고 개발 도구에서 실행하는 코드를 실행하면 됩니다.그런 다음 소스 탭에서 editor_syslog=true 아래에 코드가 표시됩니다.

여기 또 있어요:)

아래쪽에Jsfiddle.net노드

여기에 이미지 설명 입력

파일에서 JavaScript가 실행됩니다.?editor_console=true폴더에result (fiddle.jshell.net)/fiddle.jshell.net/_display[ Developper ]툴을 사용할 때 [Sources]탭의 폴더를 표시합니다.그런 다음 코드에 중단점을 추가하고 페이지를 새로 고칠 수 있습니다.여기에 이미지 설명 입력

Chrome 디버거 사용에 대한 자세한 내용은 Chrome에서 Javascript를 디버깅하는 방법을 참조하십시오.

언급URL : https://stackoverflow.com/questions/19460046/how-to-debug-the-js-in-jsfiddle

반응형