Ushbu turkum old qism haqidagi asosiy bilimlarni yozib oladi va jamlaydi, tizimli o'rganish orqali mening old tomon haqidagi tushunchalarimni mustahkamlashga umid qiladi. Matndagi asosiy bilim nuqtalarini tushunish va tushunish uchun 《 Ilg'or dastur dizayni》 4-versiyadan (Ruby Book) o'rganishning asosiy tayanchi sifatida foydalaning va ishingizda duch kelgan haqiqiy holatlar bilan birgalikda. Keling, keyingisini ko'rib chiqaylik

Ishga tushirish texnologiyasi

Umumiy qobiliyatlar

Rivojlanish samaradorligini samarali oshirish uchun odatiy ishlab chiqish jarayonida tez-tez foydalanadigan ishga tushirish usullarini sanab o'ting.

  • Kod bloklaridan foydalanish

  • Tezda DOM tuguniga murojaat qiling

  • CSS o'zgarishlarini ko'rish uchun o'zgarishlarni ko'rsatish. Ba'zan qulaylik uchun biz to'g'ridan-to'g'ri brauzerni tanlaymiz. Foydalanishga topshirilgandan keyin qanday uslubni o'zgartirganimizni qanday ko'rish mumkin?
  • commond + shift + p panelni uyg'otadi, o'zgarishlarni ko'rish uchun o'zgarishlarni ko'rsatadi diff

JavaScript-ni tuzatish

Bir bosqichli to'liq matnli ishga tushirish kodi

Eng ko'p ishlatiladigan JavaScript-ni tuzatishdir. "Debug demo" ni ochish mumkin

Keling, JS fayllari uchun to'xtash nuqtasini qanday o'rnatishni ko'rib chiqaylik. Tugmani bosganimizda OnClick funksiyasi bajariladi

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

Avval biz to'xtash nuqtasini 15Row ga o'rnatamiz. Bu funktsiyani bajarishga kirish. Biz ushbu beshta tugmani ishlatish orqali disk raskadrovka kodini qo'shimcha qilishimiz mumkin

  1. Operatsiya kodi keyingi to'xtash nuqtasiga qadar bo'ladi va agar keyingi uzilmagan nuqta kuzatilsa, u oxirigacha ishlaydi.
  2. Keyingi funktsiyani bajarishdan oldin bir bosqichli bajarish. Bu yerda keyingi funksiya xuddi shu harakat sohasiga ishora qiladi. Masalan, onClick funksiyasida ikkita funksiya chaqiriladi. Agar biz 2 tugmachasini bossak, updateLabel() qatoriga o'tishimiz kerak.

3. Keyingi funktsiyaga o'ting. Shuningdek, xuddi shu miqyos uchun keyingi bajariladigan funksiya inputsAreEmpty bo'lib, biz 3 ni bosganimizda, u inputAreEmpty funksiyasining birinchi qatorini bajaradi.

  1. Joriy funktsiyadan chiqing. Joriy funktsiyada disk raskadrovka ma'lumotlarimiz yo'qligini aniqlaganimizda, nosozliklarni tuzatishni davom ettirish uchun joriy doiradan chiqib, ota-ona doirasiga kirishimiz kerak. 3-bosqichdan so'ng, agar biz inputAreEmpty-dan sakrab chiqmoqchi bo'lsak, 4-tugmachani bosamiz.

  1. Agar siz funktsiyani bajarish jarayonini toʻliq bosib oʻtmoqchi boʻlsangiz, har doim 5-tugmani bosishingiz mumkin. Eʼtibor bering, agar funksiya qaytariladigan qiymatga ega funksiyaga ega boʻlsa, qaytariladigan qiymat ham bir qadam sifatida hisoblanadi va baʼzan buni koʻrasiz. to'xtash nuqtasi bir xil chiziqda ikki marta to'xtaydi.

o'zgaruvchini tekshiring

  • 1-usul: Joriy qamrov va qamrov zanjiridagi o'zgaruvchilarni Scope panelida ko'ring

  • 2-usul: Kuzatiladigan o'zgaruvchini tomosha paneliga kiriting

  • 3-usul: joriy doiraga kirish mumkin bo'lgan o'zgaruvchilarni to'g'ridan-to'g'ri konsolga kiriting. Bu usul ko'p o'zgaruvchilar mavjud bo'lganda foydaliroq bo'ladi va siz joriy qamrov o'zgaruvchilari asosida ba'zi hisob-kitoblarni ham bajarishingiz mumkin.

  • Qo'ng'iroqlar to'plamini ko'rish:

  1. Uning doirasidagi o'zgaruvchilarni ko'rish uchun qo'ng'iroqlar to'plamini bosing
  2. Usul birgalikda chaqirilgan bir nechta yozuvlarga ega bo'lsa, trigger funktsiyasining kelib chiqishi chaqiruvlar to'plami orqali joylashgan bo'lishi mumkin, bu biz uchun hukm qilish uchun foydalidir.

ta'mirlash

Xatoni to'g'ridan-to'g'ri faylda yangilanmasdan o'zgartirish mumkinligini aniqlaganimizda, natijani tekshirish uchun bu yerni bosing. Agar u kutganlarga javob bersa, kod yangilanishi sizning mahalliy kodingiz bilan sinxronlashtiriladi.

Xato

Nosozliklarni tuzatish orqali biz xato joyini tezda aniqlashimiz mumkin. Keyinchalik, keng tarqalgan xatolarni, ular bilan qanday kurashishni va xatolarni qanday tashlashni ko'rib chiqaylik.

xato turi

Kodni bajarish jarayonida har xil turdagi xatolar yuzaga kelishi mumkin. Har bir tur xato sodir bo'lganda tashlanadigan xato ob'ektiga mos keladi. ECMA-262 quyidagi 8 ta xato turini belgilaydi:

  • Xato asosiy klassi, boshqa xato turlari bu turni meros qilib oladi. Barcha xato turlari bir xil xususiyatlarga ega.
  • Ichki xato turi. Brauzer o'chirishlari, masalan, stekning to'lib ketishi.
  • EvalError turi. Istisnolarni tashlash uchun evalu() dan foydalaning.
  • RangeError turi. Qiymat chegaradan tashqarida bo'lganda tashlanadi.
  • ReferenceError turi. Ob'ektni topib bo'lmaganda paydo bo'ladi.
  • Xato turi. Asosan, o'zgaruvchi kutilgan turdagi bo'lmaganda sodir bo'ladi.
  • let o = new 10; 'name' in true; Function.prototype.toString.call('name'); 复制代码
  • URIE xato turi. EncodeURI() yoki decodeURI()‹TAG1›‹TAG1› yordamida notoʻgʻri tuzilgan URI uzatilganda paydo boʻladi.

xatoni qo'lga olish

  • oyna xatosi Monitor ishlayotganda xato haqida xabar beradi. Brauzer tomonidan yaratilgan yoki bo'lmagan har qanday xatoda yonadi.
window.addEventListener('error', (msg,url,lineNo,columnNo,e) => {
    // ...上报错误
  }) 
复制代码
  • va'dani rad etish ushlanmaydi.
window.addEventListener('unhandledrejection',(event) => {
    // 报错原因，当前路径，报错时间
    const { message,config:{method,url} } = event.reason
    // ...上报错误
  })
复制代码
  • catch sinxron kod xatolarini yozib olishga harakat qiling
// 保存原生的 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)
  }
复制代码

tashlash xatosi

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')
复制代码

tanib olish xatosi

  • Statik kod tahlili uchun TypeScript tavsiya etiladi
  • Odatda (==)( yoki ‹TAG1›!=) dan foydalanish kabi qiymatning maʼlumotlar turini avtomatik ravishda oʻzgartiruvchi operatorlar sabab boʻlgan turdagi konvertatsiya xatolari. va if, for, yoki while da mantiqiy bo'lmagan qiymatlardan foydalanish.
  • Ma'lumotlar turi xatosi, xavfsizlikni ta'minlash uchun turdagi tekshiruv
function getQueryString(url) {
    if(typeof url === 'string') {
        let pos = url.indexOf('?')
        if(pos > -1) {
            return url.substring(pos + 1)
        }
    }
    return '';
}
复制代码

xulosa

Bugungi murakkab veb-ilovalar uchun JS xatolarni qayta ishlash va tezkor joylashishni aniqlash juda muhimdir. U brauzerlarning umumiy disk raskadrovka usullarini va ayrim keng tarqalgan xatolar turlarini saralaydi. Kundalik rivojlanishda xatolarni qo'lga kiritish yoki yo'qligini ongli ravishda hukm qiling va xatolarni samarali identifikatsiyalash yanada mustahkam kod yozishga yordam beradi.

ma'lumotnoma

Murakkab dasturlash, 4-nashr
Chrome Developers