Table of Contents[Hide][Show]
Ua haujlwm ntawm ib txoj haujlwm nyuaj, txawm tias koj yog ib tus neeg paub txog programmer lossis ib tus neeg kawm tshiab, koj yuav zoo li khiav hla cov teeb meem. Thaum koj faib koj qhov project mus rau ntau lub modules, teeb meem tshwm sim, ua rau nws nyuaj rau taug qab qhov yuam kev thiab nrhiav kev daws teeb meem. Hauv lwm qhov xwm txheej, kev debugging tus neeg mob yuav nyuaj vim tias koj tsis tau pom qhov kev daws teeb meem uas koj tau ua haujlwm rau.
Nws kuj tshwm sim raws li ib daim ntawm code nyob rau hauv lub sij hawm, uas tej zaum yuav saib complex nyob rau hauv lub sij hawm. JavaScript yog ib hom lus hauv Web uas yooj yim heev rau kev kawm. Tsuas tso koj lub desktop browser thiab mus rau Cov Cuab Yeej Tsim Kho (feem ntau F12), thiab koj ua tiav! Tom qab ntawd koj tuaj yeem sim nrog JS yam tsis tas yuav nruab lossis khiav ib qho software nyuaj.
Txhawm rau pib, txhua yam koj xav tau yog browser. Nws yog qhov zoo uas muaj tag nrho cov kev yooj yim no tawm ntawm lub thawv, tab sis muaj qee zaus thaum koj xav tau ntau dua. Piv txwv li, xav tias koj xav sim nrog lub Web API tshiab uas koj tau pom tsis ntev los no tab sis tsis xav pib qhov tshiab.
Hauv cov ntawv tshaj tawm no, peb yuav sib piv thiab sib piv peb qhov chaw ua si JS nrov tshaj plaws, CodePen, CodeSandbox, thiab StackBlitz. Cia peb pib!
CodePen
Frontend cov cuab yeej txhim kho lub vev xaib yeej ib txwm hloov zuj zus, thiab cov ntawv kho cov ntawv yog cov khoom tseem ceeb ntawm cov thev naus laus zis tshiab uas ua rau tus tsim tawm lub neej yooj yim dua. Sib nrug los ntawm cov ntawv nyeem nyob ib leeg xws li Atom lossis Notepad ++, tau muaj kev tawg ntawm browser-raws li cov neeg kho nyob rau xyoo tas los no uas tsis xav tau kev teeb tsa thiab txhawb kev sib koom tes ntau dua.
CodePen yog "cov zej zog hauv online rau kev sim thiab nthuav tawm cov neeg siv tsim HTML, CSS, thiab JavaScript code snippets" uas muaj lub sijhawm zoo los kawm paub sau cov nplooj ntawv web page zoo dua.
CodePen muab koj ob "hom." Thawj thiab feem ntau siv yog Pen. Nws yooj yim npaum li nias lub pob thiab raug thauj mus rau tus editor. Los ntawm qhov ntawd, koj tuaj yeem nkag mus rau lub vaj huam sib luag saib ua ntej nrog rau qhov yooj yim HTML, CSS, thiab JS kho qhov rais.
Tsis muaj "cov ntaub ntawv kaw lus," "IntelliSense," lossis lwm yam - tsuas yog cov ntsiab lus yooj yim qhia thiab cov lus txib ceev zoo li prettify. Hauv cov kev xaiv tab, koj tuaj yeem xaiv los ntawm ntau yam txwv tsis pub ua ntej rau tag nrho peb hom lus (xws li TypeScript rau JS) lossis ntxiv kev sib txuas rau lwm qhov chaw.
Yog tias koj tsuas xav tau ib yam dab tsi ua dawb xwb, ob qho ntawm cov neeg kho yuav txaus. Kuv xav hais kom CodePen rau txhua yam uas tsis tas yuav teeb tsa ntau lossis tsev qiv ntawv - tsuas yog HTML, CSS, thiab JS nrog cov txheej txheem xaiv ua ntej rau saum. Yog tias koj xav siv qhov chaw ua si los txhim kho koj cov kev tshaj tawm hauv zej zog lossis tsim cov ntaub ntawv ntiag tug, CodePen yog qhov kev xaiv zoo dua.
Hwm Lauj
Koj muaj ob peb lwm txoj hauv kev xaiv los ntawm CodePen. Yog tias koj them txhua xyoo, koj tuaj yeem tau txais ib qho ntawm peb qhov kev npaj them nqi rau $ 12, $ 19, lossis $ 39 txhua lub hlis. Koj tuaj yeem tsim tus lej tsis kawg ntawm tus cwj mem ntiag tug, tshaj tawm, thiab cov khoom sau ntawm ib qho ntawm peb qib.
Koj tseem yuav tau txais daim ntawv pov thawj Pro (kev txhawb nqa kev sib raug zoo), nyob sib koom ua ke siv, tsis muaj kev tshaj tawm, thiab ntau dua. Kuj tseem muaj qee cov tswv yim tshwj xeeb hauv pab pawg thiab lwm yam kev sib txawv ntawm kev sib txawv. Mus saib lawv daim ntawv them nqi nom tswv kom paub ntxiv.
Ntsiab nta
Ib cag los ntawm kev tsim HTML, CSS, thiab JavaScript hauv CodePen, muaj ob peb yam ntxiv uas teeb nws sib nrug.
- Kev saib lub sijhawm tiag tiag ntawm koj tus lej yog ua tau. Nws tsis tas yuav muab tso ua ke.
- Kev sim ua rau koj kawm yam tshiab.
- Tsim cov rooj plaub me me los nrhiav thiab daws teeb meem.
- Qhia koj tej hauj lwm zoo.
- Tsim thiab khaws Pens rau siv tom qab.
- Sim tawm lwm tus neeg tsim tawm cov cai thiab pom nws ua haujlwm.
zoo
- Yuav pib, tsis muaj nqi.
- Ua-nyob rau hauv cov ntaub ntawv kawm.
- Koom tes nrog lwm tus thiab sib piv cov haujlwm kom pom qhov twg lawv tuaj yeem mus rau yav tom ntej.
- UI yooj yim siv thiab ncaj nraim.
tsis zoo
- Lub tsev qiv ntawv code yog me me, nws pib-code tiav tsis txaus. Nws tsuas yog zoo rau ib nplooj ntawv tej yaam num thiab ua tsis tau dab tsi loj.
- Ntawm CodePen, koj tuaj yeem tsim tus cwj mem ntiag tug, tab sis koj yuav tsum tau hloov kho mus rau Pro ua tswv cuab ($ 9 / hli).
code sandbox
CodeSandbox yog qhov web-based code editor. Nws automates transpiring, ntim, thiab dependency tswj rau koj, tso cai rau koj los tsim ib tug tshiab project nrog ib tug nias. Tom qab koj tau tsim ib yam dab tsi txaus nyiam, koj tuaj yeem qhia rau lwm tus los ntawm kev sib koom lub vev xaib.
Tus editor tau sib xws nrog txhua qhov haujlwm JavaScript, txawm hais tias nws suav nrog qee yam React-specific nta, xws li kev xaiv los txuag qhov project hauv qhov tsim-react-app template.
Txhua qhov project koj tsim hauv CodeSandbox pib nrog tus qauv. Nws tuaj yeem cuam tshuam rau ib lub tsev qiv ntawv tshwj xeeb, lub moj khaum, lossis lub sijhawm ua haujlwm (xws li Node.js) lossis siv cov txheej txheem web technologies yooj yim. Tom qab xaiv tus qauv, koj raug xa mus rau tus editor, qhov twg koj yuav pom tag nrho cov ntaub ntawv tsim nyog thiab lub qhov rais saib ua ntej tau qhib.
Koj tuaj yeem nkag mus rau "cov ntaub ntawv kaw lus" hauv txhua Sandboxes, uas txhais tau tias koj tuaj yeem tsim cov ntaub ntawv tshiab, siv cov qauv (xws li NPM pob), thiab cuam tshuam nrog cov khoom muaj nqis zoo li qub. Kuj tseem muaj lub sijhawm los hloov kho cov ntaub ntawv tsim qauv tshwj xeeb.
Koj tuaj yeem tsim koj tus kheej cov qauv rau koj qhov kev siv tshwj xeeb, ua tiav nrog cov qauv ntaub ntawv thiab kev vam khom, zoo li hauv IDE. Vim tias cov cuab yeej txuas nrog Github, koj tuaj yeem tsim kev cog lus sai thiab qhib PRs. Koj tuaj yeem xa koj daim ntawv thov mus rau ZEIT lossis Netlify tam sim ntawd.
CodeSandbox Pab Pawg Pro
CodeSandbox, lub lag luam Dutch uas tso cai rau cov neeg tsim khoom tsim lub web browser-raws li web app tsim sandbox, tau tshaj tawm lub platform kev sib koom tes uas tso cai rau pab pawg ua haujlwm ntawm cov lej hauv huab. Cov khoom tshiab, Pab Pawg Pro, yog cov kev daws teeb meem tsis muaj cai tsim los ua kom tiav cov khoom lag luam, xws li cov neeg tsim qauv thiab cov thawj coj los ntawm kev lees paub zoo (QA) pab pawg thiab tshaj.
Cov phiaj xwm tau muab tso rau hauv tus neeg siv-phooj ywg interface rau txhua tus neeg uas xav ua lossis lees txais cov kev hloov pauv hauv daim ntawv thov web, zam lwm txoj hauv kev xws li xa cov ntawv thiab cov lus pom zoo rau cov neeg tsim khoom kom ua tiav cov kev hloov pauv, xa rov qab rau kev sib tham, thiab rov ua cov txheej txheem.
Ntsiab nta
- Lub web-based code editor thiab cov cuab yeej tsim qauv.
- Rau kev siv hauv zos, sandbox tuaj yeem rub tawm tau yooj yim hauv cov ntaub ntawv zip.
- programming yog ua tiav nyob rau hauv sandboxes, uas tej zaum yuav yooj yim sib koom nrog cov neeg ua hauj lwm.
zoo
- Kev txhim kho cov neeg siv kev paub thiab kev tswj hwm ntau dua ntawm tus editor.
- Cov kev ua yeeb yam nyob saib ua ntej tuaj yeem hloov kho thiab saib hauv lub qhov rais cais.
- Cov cai tau txais formatted thiab suav nrog CLI (codesandbox-cli)
- Kev them nyiaj yug rau npm modules siab heev.
- Cov lus yuam kev zoo nrog cov lus pom zoo.
- Nws txhim kho qhov kev paub debugging los ntawm kev muab lub davhlau ya nyob twg zoo dua, kuaj saib, thiab qhov teeb meem saib.
tsis zoo
- Cov neeg siv khoom kawg yog raug rau ntau tus kheej.
- Luag thiab xa cov ntaub ntawv los ntawm lub computer hauv zos tsis ua haujlwm zoo.
- Ib cov qauv nplaub tshev yuav tsum tau ua raws li hauv CodeSandbox.
- Kev ua haujlwm ntawm tus kheej sandbox tsuas yog muaj rau cov neeg siv khoom.
StackBlitz
StackBlitz yog Visual Studio Code-powered online IDE rau web applications. Lub platform yog teb thiab yoog raws li lub desktop version. StackBlitz yog ib qho online IDE uas tuaj ua ntej nrog Angular thiab React cov cuab yeej tsim kho.
Thinkster.io tau tsim qhov project zoo heev los ua kom yooj yim li sai tau los pib nrog koj qhov project Angular lossis React yam tsis tas yuav txhawj xeeb txog kev vam khom lossis tsim teeb tsa. StackBlitz muab ntau qhov zoo kawg nkaus thiab tshwj xeeb nta uas tsis muaj lwm tus lej online editor muaj tam sim no. Raws li qhov tshwm sim, nws tsim nyog los tshawb xyuas StackBlitz ntxiv thiab nrhiav pom dab tsi hauv online IDE tau muab rau.
Stackblitz yog qhov zoo sib xws rau tag nrho IDE, tshwj xeeb tshaj yog tias koj tsis tuaj yeem hais lus zoo rau VS code vim tias lub cuab yeej yog raws li nws. Lub pob muaj ntau yam nta uas tso cai rau koj pib thiab txuas ntxiv tsim ib daim ntawv thov tag nrho.
Qhov kev pab cuam yog siv los ntawm Visual Studio, uas yog paub zoo ntawm cov neeg tsim khoom. Offline editing yog qhov project standout feature. Txhawm rau ua qhov no ua tau, pab pawg Stackblitz tsim ib qho hauv-browser webserver. Raws li koj ntaus ntawv, nws cia li nruab dependencies, compiles, bundles, thiab kub reloading.
Hwm Lauj
Cadet, Astronaut, thiab Commander muaj pub dawb, $ 8 / hli, thiab $ 29 / hli, feem. Astronaut thiab Commander suav nrog ntau tus yam ntxwv xws li cov haujlwm ntiag tug tsis txwv, tsis txwv cov ntaub ntawv uploads, caw mus rau pawg tub ntxhais hluas cov channel slack, thiab lwm yam. Yog xav paub ntxiv, mus saib lub rooj tsav xwm kev them nqi.
Ntsiab nta
- Ntxiv NPM pob rau koj qhov project.
- Ua tsaug rau qhov tshiab hauv-browser dev server, koj tuaj yeem hloov kho thaum offline.
- Ib tus tswv app URL uas tso cai rau peb nkag mus (thiab qhia) peb lub app nyob txhua lub sijhawm.
- Lwm qhov tseem ceeb ntawm Visual Studio Code nta suav nrog Intellisense, Kev Tshawb Nrhiav Qhov Haujlwm (Cmd / Ctrl + P), Mus rau Txhais, thiab lwm yam.
zoo
- Firebase lub peev xwm rau kev xa tawm.
- Tus editor yog yooj yim heev rau siv thiab ceev heev.
- Cov neeg siv tau nkag mus rau package.json, index.html, thiab index.js.
- Shareable source code uas kuj yuav embedded.
- Nyob saib ua ntej ntawm ntu loj ntawm nplooj ntawv, nrog rau kev xaiv qhib rau ntawm nplooj ntawv sib txawv yog tias tsim nyog.
- Thaum Offline, Kho kom raug
- Kev ua tiav ntse thiab txhim kho Intellisense.
- Lub hauv paus ntawm Stackblitz yog Qhib qhov chaw.
tsis zoo
- Koj tsis muaj kev cuam tshuam rau lub tsev lossis tus tsim tawm server vim tias cov no tau tswj hwm los ntawm cov lus txib tsim-react-app.
- Hauv React, yuav tsum tau saib xyuas cov txheej txheem hauv paus.
- Nws tsis muaj peev xwm format code txiav, txawm hais tias nws muaj peev xwm ua tau manually.
xaus
Niaj hnub no, qhov chaw ua si coding zoo li cov uas peb tau pom saum toj no yuav raug siv los tsim txhua qhov web project. Tsis tas yuav teeb tsa IDEs cumbersome ntawm koj lub PC thaum koj tuaj yeem tsim, debug, sim, thiab xa ncaj qha los ntawm koj lub web browser.
Hauv kuv lub tswv yim, StackBlitz yuav yog qhov zoo tshaj plaws ntawm lawv vim tias nws yog lub vev xaib IDE uas tso cai rau JavaScript, Angular, thiab lwm yam kev txhim kho txoj cai tawm ntawm lub thawv, tsis tas yuav nruab ib qho kev loj hlob hauv zos xws li Node.js, npm, los yog Angular. Nws muab kev paub zoo ib yam li siv Visual Studio Code hauv zos. Hauv kev muaj tiag, vim tias StackBlitz yog tsav los ntawm Visual Studio Code, nws xav tias nrawm thiab ntau yam raws li lub desktop version.
Qhov twg ntawm CodePen, CodeSandbox, thiab StackBlitz yog koj mus-rau cov cuab yeej? Qhia rau peb paub hauv cov lus.
Abbatyya
Ua tsaug rau cov lus zoo no, ib zaug kuv pom stackblitz.com, kuv paub qhov no yog qhov kuv xav tau.