Вэб дизайнерууд, хөгжүүлэгчид болон тестерүүдийн нэгдсэн багажууд
Ихэнх вэб хөтөч дээр ажилладаг вэбсайтуудаас гадна вэб хөгжүүлэгчид, дизайнерууд, чанарын баталгааны мэргэжилтнүүдээс гадна вэб хөтөч рүү шууд хүчирхэг хэрэгслүүдийг нэгтгэх аппликешн болон сайтуудыг бүтээхэд туслах болно. өөрсдөө.
Хөдөлгөөн гэдэг нь вэб хуудасны эх кодыг харах боломж олгодог цорын ганц програмчлал болон тест хийх хэрэгсэлүүд юм. Өнөөдрийн хөтчүүд нь JavaScript хийцийг ажиллуулах, дибаг хийх, DOM элементүүдийг шалгах, засварлах, бодит цагийн сүлжээг хянах, таны апп эсвэл хуудсын ачааллыг хянах, CSS гүйцэтгэлийг шинжлэх, таны кодыг хэтэрхий санах ой эсвэл хэтэрхий олон CPU-ийн мөчлөг ашигладаггүй. Туршилтын үүднээс та апп эсвэл Вэб хуудас янз бүрийн хөтөчид болон янз бүрийн төхөөрөмж, платформ дээр хэрхэн хариу үйлдэл хийх дизайн болон барьсан симуляторуудын ид шидээр дамжуулан хэрхэн үр дүнг гаргаж чаддаг. Хамгийн сайн зүйл бол та энэ хөтөчөө орхихгүйгээр энэ бүгдийг хийж чадна!
Хэд хэдэн алдартай Вэб хөтчөөр эдгээр хөгжүүлэгчийн хэрэгслүүдэд хэрхэн хандах талаар доорх хичээлүүдээс танд танилцана уу.
Гүүгл Кром
Chrome-ийн хөгжүүлэгчдийн хэрэгсэл нь танд кодыг засварлах, дибаг хийх боломжийг олгодог, гүйцэтгэлийн асуудлуудыг илрүүлэх, Android, iOS үйлдлийн системийг өөр өөр төрлийн дэлгэцээр дүрслэн харуулах, өөр олон ашигтай функцуудыг гүйцэтгэх боломжийг бүрдүүлэх боломжтой.
- Хөтөчийн баруун дээд буланд байрлах гурван хэвтээ шугамаар тэмдэглэгдсэн Chrome үндсэн цэсийн товчлуур дээр дарна уу.
- Унтраах цэс гарч ирэх үед хулганы заагчийг илүү олон хэрэгсэлийн сонголтоор дээшлүүл.
- Дэд цэс харагдах ёстой. Хөгжмийн хэрэгслүүдийн шошготой сонголтыг сонгоно уу. Та энэ цэсийн оронд дараах гарын товчлуурыг ашиглаж болно: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Энэ жишээний дэлгэцийн агшинд үзүүлсэн шиг Chrome Хөгжүүлэгчийн Хэрэгсэлийн интерфейс одоо харагдах болно. Chrome-ын хувилбараас хамааран таны харж буй анхны загвар нь энд харуулснаас арай өөр байх болно. Дэлгэцийн доод болон баруун талын аль алинд нь хөгжүүлэгч багажуудын гол төв нь дараах цонхуудыг агуулдаг.
Элементууд: CSS болон HTML кодыг шалгах болон CSS-н-нислэгийг бодитоор өөрчлөхийн тулд таны өөрчлөлтүүдийн нөлөөг харж чаддаг.
Консол: Chrome-ийн JavaScript консол нь шууд команд оруулах, оношлогооны дибаг хийх боломжийг олгодог.
Эх сурвалж: Та график интерфэйсээр дамжуулан JavaScript кодыг дибаг хийх боломжтой.
Сүлжээний: Идэвхтэй хэрэглээ, хуудастай холбоотой бүх үйл ажиллагааны тухай нарийвчилсан мэдээллүүдийг ангилж, харуулах, үүнд бүрэн хүсэлт, хариултын толгой, мөн цаг хугацааны нарийн хэмжүүрүүд багтана.
Хугацаа: Хуудас эсвэл апп ачааллын хүсэлтийг даруй эхлэхэд хөтчийн дотор хийгддэг бүх үйл ажиллагааны гүнзгий дүн шинжилгээ хийхийг зөвшөөрдөг. - Эдгээр хэсгүүдээс гадна та дараах багаж хэрэгслийг >> Timeline tab-ийн баруун талд байрлах >> дүрсээр дамжуулж болно.
Профайл: CPU процессор ба Heap profiler-ийн хэсгүүдэд эвдэрч, идэвхтэй хэрэглээний програм эсвэл хуудасны нийт санах ойн ашиглалт болон нийт гүйцэтгэлийн хугацаа өгдөг.
Аюулгүй байдал: Ашигтай хуудас, програмтай сертификатын асуудлууд болон аюулгүй байдлын асуудлуудтай холбоотой асуудлууд.
Нөөц: Энэ нь та одоогийн Вэб хуудас эсвэл програмын ашигладаг күүки, орон нутгийн хадгалалт, апп кеш болон бусад орон нутгийн мэдээллийн эх сурвалжийг шалгах боломжтой газар юм.
Аудит: Хуудас эсвэл аппликешн ачааллын цаг болон ерөнхий гүйцэтгэлийг оновчтой болгох арга замыг санал болгодог. - Төхөөрөмжийн горим нь идэвхтэй хуудасыг симулятор дээр харах боломжийг олгодог бөгөөд энэ нь бараг л яг хэдэн арван төхөөрөмжүүдийн нэг болох iPad, iPhone, Samsung Galaxy гэх мэт алдартай Андройд, Тагийн загваруудын нэгэнд харагдана. Та мөн тусгай хөгжүүлэлт эсвэл сорилтын хэрэгцээнд нийцүүлэн тохируулсан дэлгэцийн нарийвчлалыг дууриах чадвартай. Төхөөрөмжийн горимыг асаах, унтраахын тулд, Элементүүдийн зүүн талд байрлах утасны утасны дүрсийг сонгоно уу.
- Та босоо байрлалтай гурван цэгээр харуулсан цэсний товчлуур дээр дарж, дээр дурдсан табуудын баруун гар талд байрлана. Энэ уналтын цэснээс та боомтыг дахин байрлуулж, янз бүрийн хэрэгслийг нууж харуулах, түүнчлэн төхөөрөмжийн байцаагч зэрэг илүү дэвшилтэт зүйлсийг нээж болно. Dev энэ багажнуудын интерфэйс өөрөө энэ хэсэгт байгаа тохиргоонуудаас ихээхэн хамаарч болохыг олж мэднэ.
Mozilla Firefox
Firefox-ийн Вэб хөгжүүлэгч хэсэгт загвар зохион бүтээгчид, хөгжүүлэгчид, тестерүүд зэрэг загварын засварлагч, пиксел чиглэсэн eyedropper гэх мэт хэрэгслүүд багтдаг.
Зөвлөмж унших: Топ 25 Greasemonkey болон Tampermonkey Хэрэглэгчийн скриптүүд
- Хөтөч цонхны баруун дээд буланд байрладаг гурван хэвтээ шугамаар дүрслэгдсэн Firefox-ийн үндсэн цэсийн товчлуур дээр дарна уу.
- Унтраах цэс гарч ирэх үед Хөгжүүлэгч шошготой дүрс сонгоно уу. Вэб хөгжүүлэгчийн цэс одоо дараах сонголтуудыг агуулсан байх ёстой. Та ихэнх цэсийн зүйлүүдтэй холбоотой гарын товчлууруудтай болохыг анзаарах болно.
Түлхүүр хэрэгсэл: Хөтөч цонхны доод хэсэгт байрладаг хөгжүүлэгч багажийн интерфэйсийг хараад эсвэл далдлах. Keyboard товчлол: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspector: Алсаас дибаг хийх замаар зөөврийн төхөөрөмж дээр идэвхитэй хуудас дээр CSS болон HTML кодыг шалгах, / эсвэл өөрчлөх боломжтой. Гарын холболт: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Веб консол: Идэвхтэй хуудас доторх JavaScript илэрхийллийг гүйцэтгэх болон аюулгүй байдлын анхааруулга, сүлжээний хүсэлт, CSS зурвас гэх мэт олон төрлийн бүртгэгдсэн өгөгдлийг хянаж үзэх боломжийг олгоно. Keyboard товчлол: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Дебаг хөрвүүлэгч: JavaScript дибаг хийх нь алдаа засах цэгүүдийг тодорхойлох, DOM цэгийг шалгах, хар боксын гадаад эх сурвалжийг шалгах, өөр олон алдааг засах боломжийг олгоно. Хянагчийн хувьд ийм онцлог нь алсын дибаг хийхийг дэмждэг. Keyboard товчлол: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Style Editor: Шинэ загварын хуудас үүсгэх, тэдгээрийг идэвхтэй Вэб хуудастай холбох, одоо байгаа хуудаснуудыг засах, таны өөрчлөлтийг зөвхөн нэг товшилтоор хөтлөхөд хэрхэн нөлөөлж байгааг турших боломжтой. Keyboard товчлол: Mac OS X, Windows ( SHIFT + F7 )
Гүйцэтгэл: Идэвхитэй хуудасны сүлжээний гүйцэтгэл, жишиг хурдны өгөгдөл, JavaScript гүйцэтгэх хугацаа, төлөв, будаг гялалзах зэрэг дэлгэрэнгүй задаргаа өгдөг. Keyboard товчлол: Mac OS X, Windows ( SHIFT + F5 )
Сүлжээ: Харгалзах арга, гарал үүсэл, төрөл, хэмжээ, хугацаа зэргийг ашиглан браузерын сүлжээний хүсэлт бүрийг жагсаана. Keyboard товчлол: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Хөгжүүлэгчийн Хэрэгсэл: Интерфэйсийн тушаалын мөр тайлбарлагчийг нээнэ. Бүх боломжтой командуудын жагсаалт болон тэдгээрийн зөв синтаксын жагсаалтыг орчуулагч руу тусламж оруулаарай. Keyboard товчлол: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Firefox OS үйлдлийн системээр дамжуулан Firefox OS Simulator-аар дамжуулан вэб апп-ыг үүсгэх, ажиллуулах чадвартай. Keyboard товчлол: Mac OS X, Windows ( SHIFT + F8 )
Хөтөч консол: Вэб консолтой ижил функцийг хангадаг (дээр дурдсаныг үзнэ үү). Гэсэн хэдий ч буцаж ирсэн бүх мэдээлэл нь бүхэлд нь Firefox аппликейшн ( өргөтгөлүүд болон хөтчийн түвшний функцуудыг оруулаад) юм. Keyboard товчлол: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Responsive Design View: Таблет болон смартфон гэх мэт олон төхөөрөмжийг дууриалгахын тулд янз бүрийн шийдэл, байршил, дэлгэцийн хэмжээгээр Вэб хуудсыг даруй үзэх боломжтой. Keyboard товчлол: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Тусгаар сонгогдсон пикселийн өнгөт кодыг харуулна.
Scratchpad : Та поп гарсан Firefox цонхноос бичих, засварлах, нэгтгэх болон гүйцэтгэх JavaScript кодыг олгоно. Keyboard товчлол: Mac OS X, Windows ( SHIFT + F4 )
Эх сурвалж: Анх хөтөч дээр суурилсан хөгжүүлэгчийн хэрэгсэл, энэ сонголт нь идэвхтэй хуудсанд байгаа эх кодыг харуулна. Keyboard товчлол: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Нэмэлт хэрэгсэл аваарай: Mozilla-ийн албан ёсны нэмэгдлээр вэб хөгжүүлэгчийн Багаж хэрэгслийн хайрцаг цуглуулга нээгээд, Firebug болон Greasemonkey зэрэг олон арван алдартай өргөтгөлүүдийг үзүүлдэг.
Microsoft Edge / Internet Explorer
IE6, Microsoft Edge-ийн Dev toolset нь Internet Explorer-ийн өмнөх хувилбаруудаас интерфэйсийг эхлүүлсэн гар товчлууруудтай холбоотойгоор F12 Хөгжүүлэгчийн Хэрэгсэл гэж нэрлэгддэг бөгөөд энэ нь маш хялбархан группыг санал болгодог монитор, дампуурагчид, эмуляторууд, довтлогч нарыг ашиглана.
- Дэлгэцийн цонхны баруун дээд буланд байрлах Гурван цэгээр төлөөлүүлсэн Дэлгэрэнгүй үйлдлийн цэснээс дарна уу. Унтраах цэс гарч ирэхэд F12 Хөгжүүлэгчийн Хэрэгслийг шошготой сонголтыг сонгоно уу. Би урьд нь дурьдсанчлан, та мөн F12 гарын товчлуураар дамжуулан хэрэгслүүдийг ашиглах боломжтой.
- Хөгжүүлэлтийн интерфэйс нь одоо браузерын цонхны доод хэсэгт харагдах ёстой. Дараах хэрэгслүүд нь тус тусын таб дээр дарж эсвэл гарын товчлуурыг ашиглан товших боломжтой.
DOM Explorer: Идэвхтэй байгаа хуудсанд stylesheets болон HTML -г засварлах боломжийг танд олгодог. IntelliSense функцийг ашиглах боломжтой бол автоматаар дүүрэн кодыг ашигладаг. Гарын товчлол: (CTRL + 1)
Консол: Баталгаажуулах мэдээллээр дамжуулагч, цаг хугацаа, ул мөр, тохируулсан мессеж зэрэг нэгдсэн дибаг хийх боломжтой. Мөн идэвхтэй веб хуудсанд кодыг оруулж, хувийн хувьсагчдад олгосон утгуудыг бодит хугацаанд өөрчлөх боломжтой. Гарын товчлол: (CTRL + 2)
Дебаг хөрвүүлэгч: Хэрэв та шаардлагатай бол мөрний дагуу ажиллуулах үед кодоо дибаг хийх ба кодыг дибаг хийх боломжийг олгоно. Keyboard товчлуур: (CTRL + 3)
Сүлжээ: Хуудасны ачаалал, гүйцэтгэлийн явцад вэб хөтчийн санаачилсан сүлжээний браузерын жагсаалтыг протоколын дэлгэрэнгүй мэдээлэл, агуулгын төрөл, зурвасын ашиглалт, гэх мэт. Гарын товчлол: (CTRL + 4)
Гүйцэтгэл: Хуудасны ачаалах цаг болон бусад үйл ажиллагааг хурдасгахад туслахын тулд frame rate, CPU ашиглалтын болон гүйцэтгэлтэй холбоотой бусад хэмжлийн дэлгэрэнгүй мэдээлэл. Keyboard товчлуур: (CTRL + 5)
Санах ой: Санах ойн ашиглалтын хугацааг харуулснаар одоогийн Веб хуудсанд болзошгүй санах ойн алдагдлыг арилгахад тусалдаг. Гарын товчлол: (CTRL + 6)
Эмуляци: Идэвхитэй хуудас нь янз бүрийн нарийвчлалтай, дэлгэцийн хэмжээ, смартфон, шахмал болон бусад төхөөрөмжүүдийг хэрхэн дуурайдаг талаар танд үзүүлэх болно. Түүнчлэн хэрэглэгчийн агент болон хуудасны чиглэлийг өөрчилж, өргөргийн болон уртрагийг оруулснаар өөр өөр газарзүйн байршлуудыг дүрсэлдэг. Гарын товчлол: (CTRL + 7) - Консолыг харуулахын тулд бусад хэрэгслүүдийн дотор квадрат товчлуур дээр дарж баруун хаалтыг ашиглан хөгжлийн багажны интерфэйсийн баруун дээд буланд байрладаг.
- Хөгжмийн хэрэгслүүдийн интерфейс нь салангид цонх болж, хоёр тэгш өнцөгтээр илэрхийлэгдсэн товчлуур дээр дарах эсвэл дараах гарын товчлуурыг ашиглана: CTRL + P. Та CTRL + P товчийг дарж хоёр дахь удаа дарж хэрэгслийг өөрийн байршлаасаа буцааж болно.
Apple Safari (зөвхөн OS X)
Сафари нь олон янзын dev toolset нь дизайн болон програмчлалын хэрэгцээнд зориулж Mac-г ашигладаг томоохон хөгжүүлэгчдийн бүлгийг тусгадаг. Хүчирхэг консол болон уламжлалт бүртгэл, дибаг хийх боломжуудаас гадна хэрэглэхэд хялбар, responsive дизайн горим болон өөрийн хөтөч өргөтгөлүүдийг үүсгэх хэрэгсэл бас байдаг.
- Дэлгэцийн дээд хэсэгт байрладаг хөтчийн цэсэнд Safari дээр дарна уу. Унтраах цэс гарч ирэх үед Тохиргоо сонгоно уу. Та мөн энэ цэсийн оронд дараах гарын товчлуурыг ашиглаж болно: COMMAND + COMMA (,)
- Safari-н Тохируулгын интерфэйс нь одоо таны браузерын цонхыг нэмж харуулах болно. Толгойн баруун гар талд байрлах Нарийвчилсан дүрс дээр дарна уу.
- Нэмэлт тохиргоонууд одоо харагдах болно. Дэлгэцийн доод хэсэгт Show Develop цэсийг цэсний бланк дээр тэмдэглэх сонголтыг оруулна. Хайрцагт үзүүлэгдээгүй тэмдэг байхгүй бол тэндээс нэгийг нь тавь.
- Тохируулгын интерфэйсийг хуучны дээд булан дахь улаан "х" дээр товш.
- Одоо хөгжүүлэгч гэж нэрлэгддэг хөтөчийн цэсэнд Хавчуурга болон Цонхны хооронд байрлах шинэ сонголтыг та анзаарах болно. Энэ цэс дээр дарна уу. Дараах сонголтуудыг агуулсан drop-down цэсийг одоо харуулах ёстой.
Нээлттэй хуудас: Маск дээр суусан бусад хөтөч дээр идэвхтэй веб хуудсыг нээх боломжтой.
Хэрэглэгчийн Агент: Chrome, Firefox, Internet Explorer зэрэг хэд хэдэн хувилбаруудаас урьдчилан тодорхойлсон хэрэглэгчийн агентуудаас сонгон шалгаруулах боломжтой.
Responsive Design Mode-г оруулна уу: Одоогийн хуудсыг янз бүрийн төхөөрөмжүүд болон дэлгэцийн нарийвчлалтайгаар харуулах байдлаар байрлуулна.
Вэб шалгагчийг харуулах: Safari-ийн dev хэрэгслүүдийн үндсэн интерфэйсийг гол төлөв дэлгэцийн браузерын доод талд байрлуулж дараах хэсгүүдийг агуулсан: Элемент , Сүлжээ , Нөөц , Хугацаа , Дебаггер , Хадгалалт , Консол .
Харуулах алдааны консол: Мөн Dev багажнуудын интерфэйсийг шууд алдаа, анхааруулга болон бусад хайж олох бүртгэлийн өгөгдлийг харуулдаг Консол руу шууд дарна.
Хуудас Эх сурвалж: Документээр ангилсан идэвхтэй хуудасны эх кодыг үзүүлдэг Resources tab-ыг нээнэ.
Хуудасны эх сурвалжийг харуулах: Show Page Эхний сонголттой адил үүргийг гүйцэтгэдэг.
Show Snippet Editor: CSS болон HTML кодыг оруулж болох шинэ цонхыг нээнэ.
Өргөтгөлийн бүтээгчийг харуулах: Safari өргөтгөлүүдийг CSS, HTML, JavaScript-ээр үүсгэх эсвэл засах чадвартай байдаг.
Хугацааны бичлэгийг харуулах: Цагийн нүдийг онгойлгож, сүлжээний хүсэлт, зохион байгуулалт, рэндэрлэх мэдээлэл болон JavaScript-г бодит цаг хугацаанд нь харуулдаг.
Хоосон кэш: Одоогоор таны хатуу дискэнд хадгалагдсан бүх кешийг устгана.
Кэшийг идэвхгүй болгох: Сафари кэшийг зогсоохын тулд бүх агуулгыг хуудасны ачаалал бүр дээр серверээс татаж авдаг.
Зургийг идэвхгүй болгох: Бүх веб хуудсууд дээр үзүүлэх зургийг саад болгодог.
Хэлбэрүүдийг идэвхгүй болгох: Хуудас ачаалагдсан үед CSS шинж чанарыг үл тоох.
JavaScript-г идэвхгүйжүүлэх: Бүх хуудсан дээр JavaScript гүйцэтгэлийг хязгаарладаг.
Өргөтгөхийг идэвхгүй болгох: Хөтөч дотор ажиллаж байгаа бүх өргөтгөлүүдийг хориглох.
Сайтын тусгай нууц үгүүдийг хаах: Хэрэв идэвхтэй веб хуудсанд тусгайлан асуудлыг шийдвэрлэхийн тулд Safari-г өөрчилсөн бол, энэ тохируулга нь эдгээр өөрчлөлтүүдийг хаахын тулд хуудсыг ачаалахаас өмнө ачаалах болно.
Локал файлын хязгаарлалтыг идэвхгүй болгох: Хөтөч нь таны локал диск дээр файлууд хандах боломжийг олгодог, аюулгүй байдлын шалтгаанаар хязгаарлагдах үйлдлийг зөвшөөрдөг.
Cross-Origin Restrictions-ыг идэвхгүй болгох нь: Эдгээр хязгаарлалт нь анхдагчаар XSS болон бусад болзошгүй аюулаас урьдчилан сэргийлдэг. Гэсэн хэдий ч тэдгээрийг хөгжлийн зорилгоор түр хугацаагаар хаасан байх шаардлагатай байдаг.
Смарт Хайлтын талбараас JavaScript зөвшөөрөх: Идэвхжүүлсэн үед, URL-ууд javascript- тэй нэвтрэх боломжийг олгоно : хаягийн мөрөнд шууд холбогддог.
SHA-1 сертификатыг найдваргүй гэж үздэг: SHA-1 алгоритмийг ашиглан SSL сертификатууд нь хоцрогдсон бөгөөд эмзэг байдаг.