Bagaimana cara mencari semua skrip yang dimuat di Alat Pengembang Chrome?

430

Di Firebug, Anda dapat mencari beberapa teks dan akan mencarinya di semua skrip yang dimuat pada halaman. Bisakah hal yang sama dilakukan di alat Pengembang Chrome saat debugging skrip klien? Saya mencobanya, tetapi tampaknya hanya mencari di skrip yang saya buka, dan bukan sisanya yang ada di halaman.

Saya harap tangkapan layar berikutnya memberikan ide yang lebih baik tentang apa yang saya coba capai: teks alternatif

Tangkapan layar berikut berasal dari satu pencarian di Firebug: teks alternatif teks alternatif

google-chrome google-chrome-devtools script-debugging Slavo
sumber
1
BTW, jika Anda menggunakan Source Maps (mis. Dengan GWT Super Dev Mode), Anda dapat mencari file .java yang dipetakan dengan nama ... Ketik Ctrl + O (perintah + O pada mac) di tab Sumber.
frankadelic
6
Bolehkah saya menyarankan mengubah jawaban yang diterima ke vsevik? Ini jauh lebih bermanfaat bagi pembaca saat ini.
Mark Amery
Senang! Mendapat jawaban sempurna untuk pertanyaan ini, tetapi pencarian dalam respons jaringan tidak tersedia seperti di Firebug, sekarang bahkan tidak di firefox
Ravi Parekh
1
Gunakan 'Buka file' di Google Dev Tools (alat yang fleksibel dan berguna dengan kemampuan mencari nama fungsi Anda, nama kelas di CSS, ...). Cara menggunakan Pergi ke file di Google Chrome DevTools
Iman Bahrampour

Jawaban:

678

Buka panel pencarian baru di Alat Pengembang dengan:

  • menekan Ctrl+ Shift+ F( Cmd+ Option+ Idi mac)
  • mengklik menu overflow ( ⋮) di DevTools,Menu melimpah DevTools
  • mengklik menu overflow di Konsol ( ⋮) dan memilih opsi Pencarian

Anda dapat mencari di seluruh skrip Anda dengan dukungan untuk ekspresi reguler dan sensitivitas huruf.

Klik setiap kecocokan untuk memuat file / bagian itu di panel skrip.

Cari semua file - hasil

Pastikan 'Cari di skrip anonim dan konten' dicentang di DevTools Preferences ( F1). Ini akan mengembalikan hasil dari dalam iframe dan skrip inline HTML:

Cari di anonim dan skrip konten Preferensi Pengaturan DevTools

vsevik
sumber
14
Control + Shift + F cukup berguna tetapi tidak mengembalikan semua hit, terutama skrip di dalam iframe.
Murali VP
35
Jika Kontrol + Shift + F adalah cara untuk pergi, maka kotak pencarian atas benar-benar menyesatkan. Kedua, alur kerja pencarian dan berburu UI mengerikan. Berapa banyak yang bisa Anda paskan di area kecil itu? Mengapa tidak melakukannya seperti FF?
Mrchief
6
Bekerja dengan baik, tetapi butuh waktu lebih lama daripada FF. Perangkat Chrome Dev masih membutuhkan banyak peningkatan ... = (
Ricardo Martins
8
Pastikan bahwa Alat Pengembang ada di jendela sendiri, jika DT merapat ke jendela utama, perintah Ctrl + Shift + F tidak akan menarik pencarian untuk sumber, itu akan menjalankan pencarian default.
Highway of Life
22
Fakta bahwa saya harus google untuk ini menceritakan banyak tentang UX of Chrome Dev Tools.
Piotr Owsiak
16

Cari Semua File dengan Kontrol + Shift + F atau Konsol -> [tab Pencarian]

masukkan deskripsi gambar di sini

CATATAN: Pencarian Global muncul di sebelah menu CONSOLE

Asher
sumber
Jawaban ini pada dasarnya sama dengan yang terpilih, yang saya perbarui untuk menyertakan Konsol -> Pencarian.
Dan Dascalescu
10

Selain Ctrl+ Shift+ F( Cmd+ Option+ Fpada Mac) seperti yang disarankan dalam jawaban ini , Anda dapat mengklik kanan pada simpul pohon teratas di tab sumber dan pilih "Cari di Semua File":

masukkan deskripsi gambar di sini

McLarge Besar
sumber
5
Tidak ada lagi? Saya tidak melihatnya di Windows.
XP1
4
Tidak ada lagi pada Chrome 58.
Dan Dascalescu
Ada lagi dalam versi saat ini
Julix
Saya tidak melihatnya di Chrome versi 79 di mac os.
user674669
0

Di Windows Control + Shift + F. Pastikan juga untuk mencari di skrip konten. Pergi ke Pengaturan-> Sumber-> Cari di skrip anonim dan konten.

JDev
sumber
0

Di Chrome terbaru pada 10/26/2018, jawaban berperingkat teratas tidak lagi berfungsi, begini caranya: masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Zinan Xing
sumber
Jawaban berperingkat teratas masih berfungsi jika Anda memeriksa "Cari di skrip anonim dan konten" dari pengaturan. BTW jawaban Anda tidak terkait dengan apa yang ditanyakan; ini hanya untuk mencari nama file, bukan konten.
Koray
0

Dalam Janda itu bekerja untuk saya. Kontrol Shift F dan kemudian membuka jendela pencarian di bagian bawah. Pastikan Anda memperluas area bawah untuk melihat jendela pencarian baru.

masukkan deskripsi gambar di sini

Rupesh Kumar Tiwari
sumber
-1

Teks Anda mungkin berada di respons jaringan. Ada juga alat pencarian di tab Jaringan, dan Anda dapat mencobanya.

Apa yang ingin Anda cari mungkin tetap dalam DOM atau di memori. Jika tidak di DOM, ya, mungkin di memori, karena Anda baru saja melihatnya di layar komputer Anda. Teks yang Anda cari dapat diambil dari skrip di DOM awal atau dari respons dalam permintaan nanti.

menodai
sumber