JavaScript izstrādātājiem obligāti: efektīva atkļūdošana un drošas kodēšanas praktiskās vadlīnijas

JavaScript kā Web izstrādes stūrakmens tiek plaši izmantots front-end, back-end un mobilajās jomās. Tomēr JavaScript dinamiskās īpašības un sarežģītā darbības vide padara to par kļūdu un drošības ievainojamību perēkli. Šis raksts apvienos X/Twitter diskusijas par JavaScript, no atkļūdošanas rīkiem, drošas kodēšanas, veiktspējas optimizācijas un citiem aspektiem, lai sniegtu JavaScript izstrādātājiem virkni praktisku padomu un labākās prakses, palīdzot ikvienam rakstīt stabilāku un drošāku kodu.

I. Atvadieties no aklas minēšanas: efektīvas JavaScript atkļūdošanas prasmes

Atkļūdošana ir neatņemama izstrādes procesa sastāvdaļa. Tā vietā, lai apmaldītos konsoles console.log maģijā, labāk apgūt efektīvākus atkļūdošanas rīkus un prasmes.

1. Izmantojiet pārlūkprogrammas izstrādātāja rīkus:

Mūsdienu pārlūkprogrammām ir iebūvēti jaudīgi izstrādātāja rīki, kas nodrošina pārtraukuma punkta atkļūdošanu, tīkla uzraudzību, veiktspējas analīzi un citas funkcijas.

• Iestatiet pārtraukuma punktus: Iestatiet pārtraukuma punktus koda galvenajās vietās, lai programma apturētu izpildi, atvieglojot izstrādātājiem pārbaudīt mainīgo vērtības un programmas stāvokli. Pārlūkprogrammas izstrādātāja rīki ļauj tieši noklikšķināt uz rindiņu numuriem pirmkodā, lai iestatītu pārtraukuma punktus.

• Izpildiet soli pa solim: Izmantojiet soli pa solim (Step Over, Step Into, Step Out) funkciju, lai soli pa solim izpildītu kodu un novērotu programmas izpildes plūsmu.

• Skatiet zvanu steku: Zvanu steks reģistrē funkciju zvanu secību, kas var palīdzēt izstrādātājiem ātri noteikt problēmas atrašanās vietu.

• Uzraugiet izteiksmes: Pievienojiet uzraugāmās izteiksmes izstrādātāja rīka panelim "Watch", lai reāllaikā skatītu izteiksmju vērtību izmaiņas.

2. Izmantojiet Toast.log pārlūkprogrammas paplašinājumu:

Kā Twitter minēja @@Shefali__J, Toast .log ir ļoti noderīgs pārlūkprogrammas paplašinājums, kas var tieši parādīt konsoles kļūdas, brīdinājumus un žurnālinformāciju lapā, neatverot izstrādātāja rīka konsoli. Tas ir ļoti noderīgi, lai ātri noteiktu problēmas un uzlabotu atkļūdošanas efektivitāti.

Soļi:

1. Meklējiet "Toast .log" Chrome interneta veikalā vai citā pārlūkprogrammas paplašinājumu veikalā un instalējiet to.
2. Pēc instalēšanas atsvaidziniet savu Web lapu.
3. Kad JavaScript kods rada kļūdas, brīdinājumus vai žurnālfailus, Toast .log tos parādīs lapā kā Toast ziņojumus.

3. Izmantojiet Source Maps:

JavaScript kodam, kas ir saspiests vai transpilēts (piemēram, izmantojot Babel vai TypeScript), Source Maps var kartēt saspiesto kodu atpakaļ uz sākotnējo kodu, atvieglojot izstrādātājiem atkļūdošanu.

Konfigurācija:

1. Pārliecinieties, vai jūsu būvēšanas rīks (piemēram, Webpack, Parcel) ir pareizi konfigurēts, lai ģenerētu Source Maps failus.
2. Iespējojiet Source Maps atbalstu pārlūkprogrammas izstrādātāja rīkos.

4. Izmantojiet debugger priekšrakstu:

Tieši ievietojot debugger priekšrakstu kodā, var piespiest programmu apturēt, kad tā sasniedz šo priekšrakstu, un automātiski atvērt pārlūkprogrammas izstrādātāja rīkus.

function myFunction(arg) {
  // ...
  debugger; // Programma šeit apstāsies
  // ...
}

5. Izmantojiet profesionālus JavaScript atkļūdotājus:

Sarežģītākiem projektiem varat apsvērt iespēju izmantot profesionālus JavaScript atkļūdotājus, piemēram, Visual Studio Code vai WebStorm un citus IDE integrētos atkļūdotājus. Šie atkļūdotāji parasti nodrošina jaudīgākas funkcijas, piemēram, attālinātu atkļūdošanu, atmiņas analīzi utt.

II. Novērsiet problēmas, pirms tās rodas: JavaScript drošas kodēšanas labākā prakse

JavaScript koda drošības problēmas nedrīkst ignorēt. Kā Twitter minēja @@badcrack3r, piekļuves pilnvaru noplūde JavaScript failos var izraisīt nopietnas sekas.1. Izvairieties no sensitīvas informācijas glabāšanas klienta pusē:

Nekādā gadījumā neglabājiet klienta pusē sensitīvu informāciju, piemēram, API atslēgas, lietotāju paroles utt. Šī informācija jāglabā servera pusē un jāpiekļūst tai, izmantojot drošus API interfeisus.

2. Stingri validējiet un filtrējiet lietotāju ievadi:

Nekad neuzticieties lietotāju ievadei. Stingri validējiet un filtrējiet visus lietotāju ievadītos datus, lai novērstu XSS (starpvietņu skriptu izpilde) un SQL injekcijas un citus drošības ievainojamības.

Piemērs:

// Veiciet HTML eskeipošanu lietotāja ievadei, lai novērstu XSS uzbrukumus
function escapeHtml(text) {
 var map = {
 '&': '&',
 '': '>',
 '"': '"',
 "'": '''
 };

 return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

// Iegūstiet lietotāja ievadi
let userInput = document.getElementById("userInput").value;

// Eskeipojiet lietotāja ievadi
let safeInput = escapeHtml(userInput);

// Parādiet drošu lietotāja ievadi lapā
document.getElementById("displayArea").innerHTML = safeInput;

3. Izmantojiet CSP (Satura drošības politiku):

CSP ir HTTP atbildes galvene, kas var ierobežot pārlūkprogrammas ielādēto resursu avotu, novēršot ļaunprātīgu skriptu injekciju.

CSP konfigurēšana:

Konfigurējiet CSP atbildes galveni servera pusē, piemēram:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:;

4. Regulāri skenējiet koda ievainojamības:

Izmantojiet profesionālus drošības skenēšanas rīkus, piemēram, Snyk, OWASP ZAP utt., lai regulāri skenētu koda drošības ievainojamības un savlaicīgi tās labotu.

5. Izmantojiet tādus rīkus kā SecretFinder, lai noteiktu sensitīvas informācijas noplūdi:

Kā minēts Twitter @@chc_course, SecretFinder ir Python rīks, ko var izmantot, lai noteiktu iespējamu sensitīvas informācijas noplūdi JavaScript failos, piemēram, API atslēgas, piekļuves pilnvaras utt.

Soļi:

1. Instalējiet SecretFinder: pip install secretfinder
2. Izmantojiet SecretFinder, lai skenētu JavaScript failu: python secretfinder.py -i your_javascript_file.js -o output.txt
3. Pārbaudiet izvades failu, lai redzētu, vai nav sensitīvas informācijas noplūdes.

6. Izmantojiet HTTPS protokolu:

Pārliecinieties, vai vietne izmanto HTTPS protokolu, lai šifrētu pārsūtītos datus un novērstu uzbrukumus "cilvēks pa vidu".

III. Veiktspējas optimizācija: JavaScript koda izpildes efektivitātes uzlabošana

JavaScript koda veiktspēja tieši ietekmē lietotāja pieredzi. JavaScript koda veiktspējas optimizācija var uzlabot vietnes ielādes ātrumu un reakcijas ātrumu.

1. Samaziniet HTTP pieprasījumus:

Cik vien iespējams, samaziniet HTTP pieprasījumu skaitu, kas nepieciešams lapas ielādei, piemēram, apvienojiet CSS un JavaScript failus, izmantojiet CSS Sprites utt.

2. Saspiest JavaScript kodu:

Izmantojiet rīkus (piemēram, UglifyJS, Terser), lai saspiestu JavaScript kodu un samazinātu faila lielumu.

**3. Atlikt nekritisku resursu ielādi:**4. Izmantojiet CDN:

Izvietojiet statiskos resursus (piemēram, JavaScript failus, CSS failus, attēlus utt.) CDN (satura piegādes tīklā), lai palielinātu resursu ielādes ātrumu.

5. Izvairieties no atmiņas noplūdēm:

Esiet uzmanīgi, lai savlaicīgi atbrīvotu objektus un mainīgos, kurus vairs neizmantojat, lai izvairītos no atmiņas noplūdēm.

6. Optimizējiet DOM darbības:

Centieties samazināt DOM darbību skaitu, izvairoties no biežām DOM darbībām, kas var izraisīt lapas aizkavēšanos. Izmantojot documentFragment, varat masveidā atjaunināt DOM, uzlabojot veiktspēju.

7. Izmantojiet Web Workers:

Sarežģītiem aprēķinu uzdevumiem varat izmantot Web Workers, lai tos izpildītu fona pavedienā, izvairoties no galvenā pavediena bloķēšanas.

8. Izmantojiet Vanilla JavaScript:

Kā Twitterī minēja @@mannay, dažos vienkāršos scenārijos vietējā JavaScript (Vanilla JavaScript) izmantošana var būt efektīvāka nekā ietvara izmantošana.

9. Drag & Drop optimizācija

Kā Twitterī minēja @@midudev @atlaskit/pragmatic-drag-and-drop, velciet un nometiet scenārijos, vieglas un augstas veiktspējas bibliotēkas izvēle ir arī svarīgs veids, kā optimizēt veiktspēju.

IV. Turpiniet mācīties: aptveriet JavaScript nākotni

JavaScript valoda un ekosistēma nepārtraukti attīstās. Kā JavaScript izstrādātājam jums pastāvīgi jāapgūst jaunas tehnoloģijas un rīki, lai saglabātu konkurētspēju.

1. Sekojiet jaunākajām tehnoloģiju tendencēm:

Sekojiet jaunākajām tehnoloģiju tendencēm JavaScript kopienā, piemēram, jauniem ECMAScript standartiem, jauniem ietvariem un bibliotēkām utt.

2. Piedalieties atvērtā pirmkoda projektos:

Piedaloties atvērtā pirmkoda projektos, varat mācīties no citu izstrādātāju pieredzes un uzlabot savas programmēšanas prasmes.

3. Lasiet lielisku kodu:

Lasot lielisku kodu, varat apgūt labus programmēšanas stilus un dizaina modeļus.

4. Prakse:

Kā daudzas saites kopīgo Twitter lietotāji, projektu pabeigšana ir labākais veids, kā mācīties. Neatkarīgi no tā, vai tā ir maza spēle vai sarežģīta tīmekļa lietojumprogramma, tikai praktizējot jūs varat patiesi saprast un apgūt JavaScript zināšanas un prasmes.

KopsavilkumsŠis raksts piedāvā virkni praktisku padomu un labāko praksi JavaScript izstrādātājiem, aptverot tādas jomas kā atkļūdošanas paņēmieni, droša kodēšana un veiktspējas optimizācija. Cerams, ka šie padomi palīdzēs jums rakstīt robustāku, drošāku un efektīvāku JavaScript kodu, uzlabojot izstrādes efektivitāti un lietotāja pieredzi. Kā JavaScript izstrādātājam jums ir nepārtraukti jāmācās un jāpraktizējas, lai saglabātu konkurētspēju strauji augošajā tīmekļa izstrādes jomā.