Această serie înregistrează și adună cunoștințele de bază ale front-end-ului, în speranța de a-mi consolida înțelegerea despre front-end prin învățarea sistematică. Utilizați 《 Advanced Program Design》 Versiunea 4 ( Ruby Book ) ca pilon al învățării, combinat cu cazurile reale întâlnite în munca dvs. pentru a înțelege și înțelege punctele de bază ale cunoștințelor din text. Să aruncăm o privire în continuare

Tehnologia de punere în funcțiune

Abilități comune

Enumerați câteva dintre tehnicile de punere în funcțiune pe care le utilizați adesea în procesul obișnuit de dezvoltare pentru a vă îmbunătăți eficient eficiența dezvoltării.

  • Utilizarea blocurilor de cod

  • Obțineți rapid referința nodului DOM

  • Afișați modificările pentru a vedea modificările CSS. Uneori, pentru comoditate, vom alege să navigam direct. Cum să vedem ce stil am schimbat după punerea în funcțiune?
  • commond + shift + p evocă panoul, intră în show changes pentru a vedea modificările dif

Depanați JavaScript

Cod de punere în funcțiune cu text integral într-un singur pas

Cel mai folosit este folosirea Debug JavaScript. Poate fi deschis „debug demo”

Să vedem cum să setăm un punct de întrerupere pentru fișierele js. Funcția OnClick va fi efectuată atunci când facem clic pe butonul

function onClick() {
  // 执行函数1
  if (inputsAreEmpty()) {
    label.textContent = 'Error: one or both inputs are empty.';
    return;
  }
  // 执行函数2
  updateLabel();
}
复制代码

Mai întâi setăm punctul de întrerupere la 15Row. Aceasta este intrarea în execuția funcției. Putem mai depana codul prin acţionarea acestor cinci butoane

  1. Codul de operare este până la următorul punct de întrerupere, iar dacă următorul punct neîntrerupt este urmat, acesta va rula până la sfârșit.
  2. Execuție într-un singur pas înainte de următoarea execuție a funcției. Următoarea funcție de aici se referă la aceeași zonă de acțiune. De exemplu, două funcții sunt apelate în funcția onClick. Dacă facem clic pe butonul 2, ar trebui să sărim la linia updateLabel().

3. Treceți la următoarea funcție. Tot pentru același scop, următoarea funcție de executat este inputsAreEmpty, când facem clic pe 3, se va executa prima linie a funcției inputAreEmpty.

  1. Ieșiți din funcția curentă. Când constatăm că funcția curentă nu are informațiile noastre de depanare, trebuie să ieșim din domeniul curent și să intrăm în domeniul părinte pentru a continua depanarea. Urmând pasul 3, dacă dorim să ieșim din inputAreEmpty, putem face clic pe butonul 4. În acest moment, treceți direct la pasul următor din domeniul părinte.

  1. Dacă doriți să parcurgeți complet fluxul de execuție al funcției, puteți oricând să faceți clic pe butonul 5. Rețineți că, dacă funcția are o funcție cu o valoare returnată, valoarea returnată este, de asemenea, socotită ca un pas și, uneori, veți vedea că punctul de întrerupere se oprește de două ori pe aceeași linie.

verifica variabila

  • Metoda 1: Vizualizați variabilele din domeniul curent și lanțul de domeniu în panoul Scop

  • Metoda 2: Introduceți variabila care trebuie monitorizată în panoul ceas

  • Metoda 3: Introduceți variabilele accesibile domeniului curent direct în consolă. Această metodă este mai utilă atunci când există multe variabile și, de asemenea, puteți efectua unele calcule pe baza variabilelor de domeniu curente.

  • Vedeți stiva de apeluri:

  1. Faceți clic pe stiva de apeluri pentru a vedea variabilele din domeniul său
  2. Când o metodă are mai multe intrări care sunt apelate împreună, originea funcției de declanșare poate fi localizată prin stiva de apeluri, ceea ce este benefic pentru noi să judecăm.

reparație

Când constatăm că bug-ul poate fi modificat direct în fișier fără reîmprospătare, faceți clic pe evenimentul de aici pentru a verifica rezultatul. Dacă corespunde așteptărilor, actualizarea codului va fi sincronizată cu propriul cod local.

greşeală

Prin depanare, putem localiza rapid locația erorii. În continuare, să aruncăm o privire la erorile comune, cum să le gestionăm și cum să aruncăm erori.

tip de eroare

Pot apărea diferite tipuri de erori în timpul execuției codului. Fiecare tip corespunde unui obiect de eroare care este aruncat atunci când apare o eroare. ECMA-262 definește următoarele 8 tipuri de erori:

  • Clasa de bază de eroare, alte tipuri de erori moștenesc acest tip. Toate tipurile de erori au aceleași proprietăți.
  • Tipul InternalError. Aruncările browserului, cum ar fi depășirea stivei.
  • Tip EvalError. Utilizați evalu() pentru a arunca excepții.
  • RangeError tip. Aruncat atunci când valoarea este în afara limitelor.
  • ReferenceError tip. Apare atunci când un obiect nu poate fi găsit.
  • TypeError type. Apare în principal atunci când variabila nu este de tipul așteptat.
  • let o = new 10; 'name' in true; Function.prototype.toString.call('name'); 复制代码
  • URIEtip de eroare. Apare atunci când un URI incorect este transmis folosind encodeURI() sau decodeURI()‹TAG1›‹TAG1›.

captarea erorilor

  • window error Raportează o eroare când monitorul rulează. Declanșează orice eroare, generată de browser sau nu.
window.addEventListener('error', (msg,url,lineNo,columnNo,e) => {
    // ...上报错误
  }) 
复制代码
  • respingerea promisiunii nu este prinsă.
window.addEventListener('unhandledrejection',(event) => {
    // 报错原因，当前路径，报错时间
    const { message,config:{method,url} } = event.reason
    // ...上报错误
  })
复制代码
  • try catch capturează erorile de cod sincron
// 保存原生的 addEventListener 事件
  const originAddEventListener = EventTarget.prototype.addEventListener
  // 重写原生的监听事件
  EventTarget.prototype.addEventListener = (type,listener,options) => {
    const wrappedListenner = (...args) => {
      try {
        return listener.apply(this,args)
      } catch (error) {
        const { name,message } = error
        // ...上报错误
        throw error
      }
    }
    return originAddEventListener.call(this,type,wrappedListenner,options)
  }
复制代码

eroare de aruncare

throw new Error('something bad happened')
throw new SyntaxError('something bad happened')
throw new TypeError('something bad happened')
throw new RangeError('something bad happened')
throw new ReferenceError('something bad happened')
复制代码

eroare de recunoaștere

  • Pentru analiza codului static, este recomandat TypeScript
  • Erori de conversie de tip, cauzate de obicei de operatorii care schimbă automat tipul de date al unei valori, cum ar fi utilizarea (==)( sau ‹TAG1›!=). și utilizarea valorilor non-booleene în if, for sau while.
  • Eroare de tip de date, verificare tip pentru a asigura siguranța
function getQueryString(url) {
    if(typeof url === 'string') {
        let pos = url.indexOf('?')
        if(pos > -1) {
            return url.substring(pos + 1)
        }
    }
    return '';
}
复制代码

rezumat

Pentru aplicațiile web complexe de astăzi, gestionarea erorilor js și poziționarea rapidă sunt foarte importante. Sortează metodele comune de depanare ale browserelor și unele tipuri comune de erori. În dezvoltarea zilnică, judecă în mod conștient dacă să captezi erori, iar identificarea eficientă a erorilor ajută la scrierea unui cod mai robust.

referinţă

Programare avansată, ediția a 4-a
Dezvoltatori Chrome