Saya sedang mengerjakan bukti konsep menggunakan Angular JavaScript.

Bagaimana cara men-debug kode JavaScript Angular di browser yang berbeda (Firefox dan Chrome)?

1. Chrome

Untuk Debug AngularJS di chrome Anda bisa menggunakan AngularJS Batarang . (Dari review terbaru tentang plugin, sepertinya AngularJS Batarang tidak lagi dipertahankan. Diuji di berbagai versi chrome tidak berfungsi)

Ini Tautan untuk deskripsi dan Demo:

Pengenalan Angular JS Batarang

Unduh plugin chrome dari sini: plugin chrome untuk debug AngularJS

Anda juga dapat merujuk tautan ini: ng-book: Debugging AngularJS

Anda juga bisa menggunakan ng-inspect untuk debugging angular.

2. Firefox

Untuk Firefox dengan bantuan Firebug Anda dapat men-debug kode tersebut.

Gunakan juga Pengaya Firefox ini: AngScope: Pengaya untuk Firefox (Bukan ekstensi resmi oleh Tim AngularJS)

3. Debugging AngularJS : Periksa Link: Debugging AngularJS

IMHO, pengalaman yang paling membuat frustasi datang dari mendapatkan / menetapkan nilai lingkup tertentu yang terkait dengan elemen visual. Saya melakukan banyak breakpoint tidak hanya di kode saya sendiri, tetapi juga di angular.js itu sendiri, tetapi terkadang itu bukan cara yang paling efektif. Meskipun metode di bawah ini sangat ampuh, metode tersebut pasti dianggap sebagai praktik yang buruk jika Anda benar-benar menggunakannya dalam kode produksi, jadi gunakan dengan bijak!

Dapatkan referensi di konsol dari elemen visual

Di banyak browser non-IE, Anda dapat memilih elemen dengan mengklik kanan salah satu elemen dan mengklik "Periksa Elemen". Sebagai alternatif, Anda juga dapat mengklik elemen apa pun di tab Elemen di Chrome, misalnya. Elemen terbaru yang dipilih akan disimpan dalam variabel $0di konsol.

Dapatkan cakupan yang ditautkan ke elemen

Bergantung pada apakah ada direktif yang membuat cakupan isolasi, Anda bisa mengambil cakupan dengan angular.element($0).scope()atau angular.element($0).isolateScope()(gunakan $($0).scope()jika $ diaktifkan). Ini persis seperti yang Anda dapatkan ketika Anda menggunakan Batarang versi terbaru. Jika Anda mengubah nilainya secara langsung, ingatlah untuk menggunakan scope.$digest()untuk mencerminkan perubahan pada UI.

$ eval jahat

Belum tentu untuk debugging. scope.$eval(expression)sangat berguna saat Anda ingin memeriksa dengan cepat apakah ekspresi memiliki nilai yang diharapkan.

Anggota prototipe ruang lingkup yang hilang

Perbedaan antara scope.bladan scope.$eval('bla')adalah yang pertama tidak mempertimbangkan nilai yang diwariskan secara prototipe. Gunakan potongan di bawah ini untuk mendapatkan gambaran keseluruhan (Anda tidak dapat langsung mengubah nilainya, tetapi Anda dapat menggunakan$eval tetap !)

scopeCopy = function (scope) {
    var a = {}; 
    for (x in scope){ 
        if (scope.hasOwnProperty(x) && 
            x.substring(0,1) !== '$' && 
            x !== 'this') {
            a[x] = angular.copy(scope[x])
        }
    }
    return a
};

scopeEval = function (scope) {
    if (scope.$parent === null) {
        return hoho(scope)
    } else {
        return angular.extend({}, haha(scope.$parent), hoho(scope))
    }
};

Gunakan dengan scopeEval($($0).scope()).

Di mana pengontrol saya?

Terkadang Anda mungkin ingin memantau nilai-nilai ngModelsaat Anda menulis arahan. Gunakan $($0).controller('ngModel')dan Anda akan mendapatkan untuk memeriksa $formatters, $parsers, $modelValue, $viewValue $renderdan segala sesuatu.

ada juga $ log yang bisa kamu gunakan! itu memanfaatkan konsol Anda dengan cara yang Anda inginkan!

menunjukkan kesalahan / peringatan / info seperti yang ditunjukkan konsol Anda biasanya!

gunakan ini> Dokumen

Meski pertanyaannya sudah terjawab, bisa jadi menarik untuk melihat ng-inspector

Coba ng-inspektur. Unduh add-on untuk Firefox dari situs web http://ng-inspector.org/ . Ini tidak tersedia di menu add on Firefox.

http://ng-inspector.org/ - situs web

http://ng-inspector.org/ng-inspector.xpi - Pengaya Firefox

Sayangnya sebagian besar add-on dan ekstensi browser hanya menampilkan nilainya kepada Anda, tetapi tidak mengizinkan Anda mengedit variabel cakupan atau menjalankan fungsi sudut. Jika Anda ingin mengubah variabel $ scope di konsol browser (di semua browser) maka Anda dapat menggunakan jquery. Jika Anda memuat jQuery sebelum AngularJS, angular.element dapat melewati pemilih jQuery. Jadi, Anda dapat memeriksa cakupan pengontrol dengan

angular.element('[ng-controller="name of your controller"]').scope()

Contoh: Anda perlu mengubah nilai variabel $ scope dan melihat hasilnya di browser lalu ketikkan di konsol browser:

angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value";
angular.element('[ng-controller="mycontroller"]').scope().$apply();

Anda dapat segera melihat perubahan di browser Anda. Alasan kami menggunakan $ apply () adalah: variabel cakupan apa pun yang diperbarui dari konteks sudut luar tidak akan memperbarui pengikatannya, Anda perlu menjalankan siklus intisari setelah memperbarui nilai cakupan menggunakan scope.$apply().

Untuk mengamati nilai variabel $ scope, Anda hanya perlu memanggil variabel itu.

Contoh: Anda ingin melihat nilai $ scope.var1 di konsol web di Chrome atau Firefox cukup ketik:

angular.element('[ng-controller="mycontroller"]').scope().var1;

Hasilnya akan segera ditampilkan di konsol.

Tambahkan panggilan ke debuggertempat Anda ingin menggunakannya.

someFunction(){
  debugger;
}

Di consoletab alat pengembang web browser Anda, masalahangular.reloadWithDebugInfo();

Kunjungi atau muat ulang halaman yang ingin Anda debug dan lihat debugger muncul di browser Anda.

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle); 

scope () Kita bisa mengambil $ scope dari elemen (atau induknya) dengan menggunakan metode scope () pada elemen:

var scope = ele.scope();

penyuntik()

var injector = ele.injector();

Dengan injektor ini, kita kemudian dapat membuat instance objek Angular apa pun di dalam aplikasi kita, seperti layanan, pengontrol lain, atau objek lain apa pun.

Anda dapat menambahkan 'debugger' dalam kode Anda dan memuat ulang aplikasi, yang menempatkan breakpoint di sana dan Anda dapat 'melangkahi', atau menjalankan.

var service = {
user_id: null,
getCurrentUser: function() {
  debugger; // Set the debugger inside 
            // this function
  return service.user_id;
}

Anda dapat men-debug menggunakan peramban bawaan alat pengembang.

1. buka alat pengembang di browser dan buka tab sumber.

2. buka file yang ingin Anda debug menggunakan Ctrl + P dan cari nama file

3. tambahkan break point pada baris ny klik di sisi kiri kode.

4. segarkan halaman.

Ada banyak plugin yang tersedia untuk debugging yang dapat Anda rujuk untuk menggunakan plugin chrome Debug Aplikasi Angular menggunakan plugin "Debugger untuk chrome"

Untuk kode Visual Studio (bukan Visual Studio) lakukan Ctrl+ Shift+P

Ketik Debugger untuk Chrome di bilah pencarian, pasang dan aktifkan.

Di launch.jsonfile Anda, tambahkan konfigurasi ini:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceRoot}/app/files",
            "sourceMaps": true
        },
        {
            "name": "Launch index.html (without sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

Anda harus meluncurkan Chrome dengan mengaktifkan debugging jarak jauh agar ekstensi dapat melampirkannya.

• Windows

Klik kanan pintasan Chrome, dan pilih properti Di bidang "target", tambahkan --remote-debugging-port = 9222 Atau di prompt perintah, jalankan /chrome.exe --remote-debugging-port = 9222

• OS X

Di terminal, jalankan / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222

• Linux

Di terminal, luncurkan google-chrome --remote-debugging-port = 9222

Temukan Lebih Banyak ===>

Karena add-on tidak berfungsi lagi, seperangkat alat paling bermanfaat yang saya temukan adalah menggunakan Visual Studio / IE karena Anda dapat mengatur breakpoint di JS dan memeriksa data Anda dengan cara itu. Tentu saja Chrome dan Firefox memiliki alat dev yang jauh lebih baik secara umum. Juga, console.log () yang bagus telah sangat membantu!

Mungkin Anda dapat menggunakan Angular Augury A Google Chrome Dev Tools extension untuk debugging aplikasi Angular 2 dan di atasnya.