วิธีการดีบัก js ใน jsfiddle

ฉันกำลังดู jsfiddle นี้: http://jsfiddle.net/carpasse/mcVfK/ มันใช้งานได้ดีนั่นไม่ใช่ปัญหาฉันแค่อยากรู้วิธีการดีบักผ่านจาวาสคริปต์ ฉันพยายามใช้คำสั่งดีบักเกอร์ แต่หาไม่พบในแท็บแหล่งที่มา? มีความคิดอย่างไรที่ฉันจะแก้ไขข้อบกพร่องนี้ได้

รหัสบางส่วนจากซอ:

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 ถูกเรียกใช้งานจากโฟลเดอร์ fiddle.jshell.net ของแท็บ Sources ของ Chrome คุณสามารถเพิ่มเบรกพอยต์ลงในไฟล์ดัชนีที่แสดงในภาพหน้าจอ Chrome ด้านล่าง

ใช้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'});
}]);

สิ่งที่ควรค่าแก่การกล่าวถึง หากคุณเคยใช้เครื่องมือ Chrome dev กดctrl+ shift+ Fและคุณสามารถค้นหาไฟล์ทั้งหมดในแหล่งที่มา

นอกจากคำตอบอื่น ๆ

บ่อยครั้งที่มีประโยชน์เพียงแค่เขียนข้อมูลการดีบักลงในคอนโซล:

console.log("debug information here");

เอาต์พุตมีอยู่ในคอนโซล dev tools ของเบราว์เซอร์ เหมือนมันถูกบันทึกจากรหัสจาวาสคริปต์ปกติ
สิ่งนี้ค่อนข้างง่ายและมีประสิทธิภาพ

การเพิ่มคำสั่ง debugger ในโค้ดและเปิดใช้งาน "Developer Tools" ใน bowser จากนั้นเมื่อคุณรันโค้ดใน JSFiddle ดีบักเกอร์จะโดน!

ที่นี่เป็นอีกที่หนึ่ง :)

ภายใต้Jsfiddle.netโหนด

JavaScript ถูกเรียกใช้งานจากไฟล์?editor_console=trueในโฟลเดอร์result (fiddle.jshell.net)/fiddle.jshell.net/_displayโฟลเดอร์ของแท็บ Sources ของ Chrome เมื่อใช้เครื่องมือ Developper คุณสามารถเพิ่มเบรกพอยต์ลงในโค้ดของคุณจากนั้นรีเฟรชหน้า

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ดีบักเกอร์ chrome ได้ที่พยายามดีบัก Javascript ใน Chrome