cara men-debug js di jsfiddle

95

Saya melihat jsfiddle ini: http://jsfiddle.net/carpasse/mcVfK/ Bekerja dengan baik bukan itu masalahnya, saya hanya ingin tahu cara men-debug melalui javascript. Saya mencoba menggunakan perintah debugger dan saya tidak dapat menemukannya di tab sumber? tahu bagaimana saya bisa men-debug ini?

beberapa kode dari biola:

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

debugging angularjs jsfiddle

— Pindakaas
sumber

2

Masukkan kata tersebut debugger;ke dalam kode. Chrome dan Firefox akan secara otomatis membuka debugger langkah demi langkah! (Saya telah menyalin tip ini dari jawaban @ user3335908 untuk membuatnya lebih menonjol)

— Will Sheppard

54

JavaScript dijalankan dari folder fiddle.jshell.net pada tab Sources Chrome. Anda dapat menambahkan breakpoint ke file indeks yang ditunjukkan pada tangkapan layar Chrome di bawah.

Debugging JSFiddle di Chrome

masukkan deskripsi gambar di sini

— apandit
sumber

9

ini tidak menunjukkan apa-apa bagi saya. Saya mendapatkan file indeks kosong

— Oliver Watkins

1

@OliverWatkins itu kosong untuk saya juga, saya memperbaikinya dengan mengklik "Perbarui" di atas, lalu saya perhatikan setelah saya menjalankan lagi, di tab Sumber di panel alat pengembang, di bawah "jsfiddle.net", lalu di bawah folder bernama saya , ada direktori tambahan dengan file indeks lain yang menunjukkan kode tersebut. Semoga ini membantu!

— MilesMorales

Saya memiliki folder ke-3 di bawah fiddle.jshell.net yang memiliki (index) juga. Jika saya membukanya, ada file html dengan js yang tertanam di dalamnya. (di baris 48 ketika saya menulis ini)

— John MacIntyre

fiddle.jshell.nethanya berisi _displaydengan (index)inside, yang merupakan halaman HTML dengan hampir kosong <p>That page doesn't exist.</p>. Kode js saya tidak ada

— CygnusX1

36

Gunakan debugger;pernyataan dalam kode. Browser memasukkan breakpoint pada pernyataan ini, dan Anda dapat melanjutkan di debugger browser.

Ini harus bekerja setidaknya di chrome dan 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'});
}]);

— pengguna3335908
sumber

Inilah jawaban terbaik!

— vibs2006

6

Sesuatu yang layak untuk disebutkan. Jika Anda pernah menggunakan alat dev chrome. Tekan ctrl+ shift+ Fdan Anda dapat mencari semua file di sumbernya.

— Oliver Orchard
sumber

2

Itu sangat berguna, di Mac menggunakan Cmd + Alt + F

— John W. Clark

Ini akan menjadi jawaban yang jauh lebih baik, tetapi breakpoint yang ditetapkan pada kode yang Anda temukan dengan cara ini tidak akan diterima.

— Slbox

Terima kasih untuk petunjuk ini saya dapat menemukan kode dalam file yang tidak muncul di pohon sumber ...

— GarfieldKlon

3

Selain jawaban lainnya.

Sering kali, cukup tulis informasi debug ke konsol akan berguna:

console.log("debug information here");

Outputnya tersedia di browser dev tools console. Seperti itu login dari kode javascript biasa.
Ini cukup sederhana dan efektif.

— Alexander Stepaniuk
sumber

3

Menambahkan pernyataan debugger di kode dan mengaktifkan "Alat Pengembang" di bowser. Kemudian saat Anda menjalankan kode di JSFiddle, debugger akan terkena !.

— P. Muralikrishna
sumber

0

Ini tempat lain :)

Di bawah Jsfiddle.netsimpul.

— Sampath
sumber

Hal ini tampaknya cointain kode sumber yang ditampilkan pada halaman, dikelilingi dengan <pre>... </pre>. Ini bukan kode yang sebenarnya dapat dijalankan.

— CygnusX1

Anda tidak dapat men-debug kode ini. Satu petunjuk bahwa Anda tidak bisa adalah penyorotan yang hilang ...

— GarfieldKlon

0

JavaScript dijalankan dari file ?editor_console=truedi folder result (fiddle.jshell.net)/fiddle.jshell.net/_displayfolder pada tab Sumber di Chrome saat menggunakan alat pengembang. Anda dapat menambahkan breakpoint ke kode Anda kemudian dan menyegarkan halaman.

Informasi selengkapnya tentang menggunakan chrome debugger dapat ditemukan di Mencoba men-debug Javascript di Chrome

— pengguna2010781
sumber