Rumah > Artikel > hujung hadapan web > 11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan
Artikel ini akan berkongsi dengan anda 11 kemahiran penyahpepijatan krom lanjutan, yang secara langsung boleh meningkatkan kecekapan sebanyak 666%. Saya harap ia akan membantu rakan saya!
Pelayar Chrome digunakan sebagai kasut kanak-kanak bahagian hadapan老婆
, saya percaya anda mesti biasa dengannya. 调页面
, 写BUG
, 画样式
, 看php片
Seluruh dunia akan menjadi tidak sedap tanpanya.
Tak percaya? Mari lihat betapa hebatnya 老婆
kami....
dalam penyahpepijatan bersama dengan antara muka bahagian belakang atau. Apabila menyelesaikan masalah pepijat dalam talian, adakah anda sering mendengar mereka berkata begini: Cuba buat permintaan lain dan beritahu saya sebab ia salah!
Hantar semula permintaan, ada cara yang tidak masuk akal.
Semak Network
Klik Fetch/XHR
untuk memilih permintaan untuk dihantar semula
Klik kanan dan pilih Replay XHR
Tidak perlu memuat semula halaman, tidak perlu untuk berinteraksi dengan halaman, bukankah ia sangat istimewa? ! !
Ini masih merupakan senario penyahpepijatan bersama atau pembetulan pepijat Untuk permintaan yang sama, kadangkala perlu ubah suai parameter input Mulakan semula, apakah jalan pintas yang ada?
Pilih Network
Klik Fetch/XHR
Pilih Copy as fetch
Tampal kod dalam konsol
Ubah suai parameter dan tekan Enter
Saya selalu menukar kod atau menulis fetch
dengan tangan. >
Gunakan fungsi dan laksanakan
sebagai parameter inputcopy
对象
JSON.stringify(fetfishObj, null, 2)
, dsb. .? Elements
JS
宽
高
Pilih elemen untuk dinyahpepijat melalui 位置
Konsol boleh diakses terus dengan Elements
5# Tangkap halaman web skrin penuh
Sediakan kandungan yang perlu di tangkap skrin
cmd shift p
Command
Masukkan
Capture full size screenshot
Bagaimana jika anda ingin memintas beberapa elemen yang dipilih?
Jawapannya juga sangat mudah dalam langkah ketiga, masukkan ke
Capture node screenshot
6# elemen dengan satu klik
Tekan dan tahan kekunci
dan klik (elemen paling luar yang perlu dikembangkan)opt
7# Konsol merujuk kepada hasil pelaksanaan yang terakhir
Anda mungkin melakukan ini
'fatfish'.split('').reverse().join('') // hsiftaf
// 第1步 'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h'] // 第2步 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f'] // 第3步 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
更简单的方式
使用$_
引用上一次操作的结果,不用每次都复制一遍
// 第1步 'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h'] // 第2步 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f'] // 第3步 $_.join('') // hsiftaf
有的同学喜欢chrome的白色主题,有的喜欢黑色,我们可以使用快捷键迅速切换两个主题。
cmd + shift + p
执行Command
命令
输入Switch to dark theme
或者Switch to light theme
进行主题切换
$
"和"$$
"选择器在控制台使用document.querySelector
和document.querySelectorAll
选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用$
和$$
替代。
$i
直接在控制台安装npm包你遇到过这个场景吗?有时候想使用比如dayjs
或者lodash
的某个API
,但是又不想去官网查,如果可以在控制台直接试出来就好了。
Console Importer 就是这么一个插件,用来在控制台直接安装npm
包。
安装Console Importer
插件
$i('name')安装npm包
假设有下面这段代码,咱们希望食物名字是?
时才触发断点,可以怎么弄?
const foods = [ { name: '?', price: 10 }, { name: '?', price: 15 }, { name: '?', price: 20 }, ] foods.forEach((v) => { console.log(v.name, v.price) })
这在大量数据下,只想对符合条件时打断点条件将会非常方便。试想如果没有条件断点咱们是不是要点n次debugger?
Atas ialah kandungan terperinci 11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!