Rumah  >  Artikel  >  hujung hadapan web  >  11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

青灯夜游
青灯夜游ke hadapan
2022-06-13 10:41:102052semak imbas

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!

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

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....

1# Mulakan semula permintaan dengan satu klik

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

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

Tidak perlu memuat semula halaman, tidak perlu untuk berinteraksi dengan halaman, bukankah ia sangat istimewa? ! !

2# Mulakan permintaan dalam konsol dengan pantas

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

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

Saya selalu menukar kod atau menulis fetch dengan tangan. >

Bagaimana jika kod anda mengeluarkan

objek kompleks selepas pengiraan dan perlu disalin dan dihantar kepada orang lain?

Gunakan fungsi dan laksanakan

sebagai parameter input
  • copy对象

  • Sebelum ini saya sentiasa cetak ke konsol melalui
dan kemudian salin dan tampal secara manual, yang sememangnya tidak cekap...

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

4#. Konsol mendapat elemen yang dipilih dalam panel Elemen

JSON.stringify(fetfishObj, null, 2)

Selepas memilih elemen melalui panel

semasa menyahpepijat halaman web, bagaimana jika anda ingin mengetahui beberapa atributnya melalui , seperti ,

,

, dsb. .? ElementsJSPilih elemen untuk dinyahpepijat melalui 位置

  • Konsol boleh diakses terus dengan Elements

5# Tangkap halaman web skrin penuh 11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

Sesekali kami perlu mengambil tangkapan skrin halaman web, satu skrin. baik, sistem Ia boleh dilakukan dengan tangkapan skrin terbina dalam atau tangkapan skrin WeChat, tetapi bagaimana jika anda dikehendaki menangkap kandungan yang melebihi satu skrin ?

Sediakan kandungan yang perlu di tangkap skrin

  • Laksanakan
  • arahan
  • cmd shift p Command Masukkan

    dan tekan Enter
  • Capture full size screenshot

Bagaimana jika anda ingin memintas beberapa elemen yang dipilih? 5 (1).gif

Jawapannya juga sangat mudah dalam langkah ketiga, masukkan ke

Capture node screenshot

6# elemen dengan satu klik 5-11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

Apabila menyahpepijat elemen, adakah anda sering mengembangkan dan menyahpepijatnya satu demi satu apabila tahapnya agak dalam? Terdapat cara yang lebih pantas

Tekan dan tahan kekunci

dan klik (elemen paling luar yang perlu dikembangkan)
  • opt

7# Konsol merujuk kepada hasil pelaksanaan yang terakhir11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

Mari kita lihat senario ini, saya rasa anda pasti pernah menghadapinya operasi rentetan pada rentetan tertentu Pelbagai proses, dan kemudian kita ingin tahu keputusan setiap langkah, apakah yang perlu kita lakukan? .

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

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

更简单的方式

使用$_引用上一次操作的结果,不用每次都复制一遍

// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

8.# 快速切换主题

有的同学喜欢chrome的白色主题,有的喜欢黑色,我们可以使用快捷键迅速切换两个主题。

  • cmd + shift + p 执行Command命令

  • 输入Switch to dark theme或者Switch to light theme进行主题切换

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

9.# "$"和"$$"选择器

在控制台使用document.querySelectordocument.querySelectorAll选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用$$$替代。

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

10.# $i直接在控制台安装npm包

你遇到过这个场景吗?有时候想使用比如dayjs或者lodash的某个API,但是又不想去官网查,如果可以在控制台直接试出来就好了。

Console Importer 就是这么一个插件,用来在控制台直接安装npm包。

  • 安装Console Importer插件

  • $i('name')安装npm包

11 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

11.# Add conditional breakpoint条件断点的妙用

假设有下面这段代码,咱们希望食物名字是?时才触发断点,可以怎么弄?

const foods = [
  {
    name: '?',
    price: 10
  },
  {
    name: '?',
    price: 15
  },
  {
    name: '?',
    price: 20
  },
]

foods.forEach((v) => {
  console.log(v.name, v.price)
})

这在大量数据下,只想对符合条件时打断点条件将会非常方便。试想如果没有条件断点咱们是不是要点n次debugger?

111 petua penyahpepijatan krom yang boleh meningkatkan kecekapan

(学习视频分享:web前端开发编程基础视频

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!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam