Yuav ua li cas Siv Web Browser Tsim Cov Cuab Yeej

2024 Tus sau: Abigail Brown | [email protected]. Kawg hloov kho: 2023-12-17 06:49

Ntxiv rau cov neeg tsim browser feem ntau tsom rau cov neeg siv niaj hnub tab tom nrhiav rau lub vev xaib, lawv kuj ua rau cov neeg tsim tawm lub vev xaib, cov neeg tsim qauv thiab cov kws tshaj lij kev lees paub zoo uas pab tsim cov apps thiab cov chaw uas cov neeg siv nkag los ntawm kev sib koom ua ke muaj zog. cov cuab yeej txoj cai rau hauv browsers lawv tus kheej.

Tau mus yog hnub uas tsuas yog cov programming thiab ntsuas cov cuab yeej pom nyob rau hauv browser tso cai rau koj saib nplooj ntawv qhov chaws thiab tsis muaj dab tsi ntxiv. Cov browsers niaj hnub no tso cai rau koj nkag mus tob tob dua los ntawm kev ua tej yam xws li kev ua haujlwm thiab kev debugging JavaScript snippets, tshuaj xyuas thiab kho DOM cov ntsiab lus, saib xyuas lub sijhawm ntawm kev sib txuas hauv network raws li koj lub app lossis nplooj ntawv thauj khoom txhawm rau txheeb xyuas cov teeb meem, tshuaj xyuas CSS kev ua tau zoo, kom ntseeg tau tias koj cov cai yog tsis siv ntau lub cim xeeb lossis ntau dhau CPU mus, thiab ntau ntxiv.

Los ntawm qhov kev tshuaj ntsuam xyuas, koj tuaj yeem rov tsim dua li cas ib qho app lossis nplooj ntawv web yuav ua rau hauv cov browser sib txawv nrog rau ntawm cov khoom siv sib txawv thiab cov platforms los ntawm cov khawv koob ntawm cov qauv tsim thiab cov simulators built-in. Qhov zoo tshaj plaws yog tias koj tuaj yeem ua txhua yam no yam tsis tas yuav tawm ntawm koj tus browser!

Cov lus qhia hauv qab no qhia koj txog kev nkag mus rau cov cuab yeej tsim tawm no hauv ntau lub vev xaib nrov.

Google Chrome

Cov cuab yeej tsim tawm Chrome tso cai rau koj hloov kho thiab kho qhov teeb meem, tshuaj xyuas cov khoom ntiag tug kom nthuav tawm cov teeb meem kev ua tau zoo, simulate cov ntxaij vab tshaus sib txawv suav nrog cov uas khiav hauv Android lossis iOS, thiab ua ntau lwm yam tseem ceeb.

1. Xaiv Chrome's main menu, cim nrog peb kab kab rov tav thiab nyob rau sab xis sab xis ntawm qhov browser.

2. Thaum cov ntawv qhia zaub mov tshwm, txav koj tus nas cursor hla ntawm Ntau cov cuab yeej kev xaiv.

   

3. Ib daim ntawv qhia zaub mov yuav tsum tam sim no tshwm. Xaiv qhov kev xaiv sau cov cuab yeej tsim tawm . Koj tseem tuaj yeem siv cov keyboard shortcut nram qab no rau qhov chaw ntawm cov ntawv qhia zaub mov no: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X ( ALT(OPTION) +COMMAND+I )

   

4. Chrome Developer Tools interface yuav tsum tau muab tso tawm tam sim no, raws li qhia hauv qhov piv txwv no screenshot. Nyob ntawm koj qhov version ntawm Chrome, thawj qhov kev teeb tsa uas koj pom yuav txawv me ntsis ntawm qhov tau nthuav tawm ntawm no. Lub hub tseem ceeb ntawm cov cuab yeej tsim tawm, feem ntau nyob rau hauv qab lossis sab xis ntawm lub vijtsam, muaj cov hauv qab no tab.

5. Ntxiv rau cov ntu no, koj tseem tuaj yeem nkag mus rau cov cuab yeej hauv qab no los ntawm >> icon, nyob rau sab xis ntawm Performance tab.

   • Memory: Saib xyuas thiab sau cov kev siv nco ntawm nplooj ntawv web. Koj tuaj yeem pom qhov hnyav npaum li cas ntawm JavaScript ntawm koj lub xaib.
   • Security: Qhia txog teeb meem ntawm daim ntawv pov thawj thiab lwm yam teeb meem ntsig txog kev nyab xeeb nrog nplooj ntawv nquag lossis daim ntawv thov.
   • Application: Tshawb xyuas cov peev txheej siv los ntawm daim ntawv thov web. Tau txais qhov kev faib ua tiav ntawm qhov tau siv.
   • Audits: Muab txoj hauv kev los txhim kho nplooj ntawv lossis daim ntawv thov lub sijhawm thauj khoom thiab kev ua haujlwm dav dav.

   

6. Device Hom tso cai rau koj saib nplooj ntawv nquag hauv lub simulator uas ua rau nws yuav luag raws nraim li nws yuav tshwm sim ntawm ib qho ntawm ntau tshaj kaum lub cuab yeej, suav nrog ntau lub npe nrov hauv Android thiab cov qauv iOS no xws li iPad, iPhone, thiab Samsung Galaxy. Koj tseem muaj peev xwm ua raws li kev cai tshuaj ntsuam kev daws teeb meem kom haum rau koj qhov kev txhim kho tshwj xeeb lossis kev sim xav tau.

   Toggle Device Mode rau thiab tawm, xaiv lub mobile xov tooj icon nyob ncaj qha rau sab laug ntawm Elements tab.

   

7. Koj tuaj yeem hloov kho qhov zoo thiab qhov xav tau ntawm koj cov cuab yeej tsim tawm los ntawm kev xaiv thawj zaug menu khawm sawv cev los ntawm peb vertically-placed dots thiab nyob rau ntawm sab xis sab xis ntawm cov tabs hais saum toj no.

   Los ntawm hauv cov ntawv qhia zaub mov no, koj tuaj yeem hloov kho qhov chaw nres nkoj, qhia lossis zais cov cuab yeej sib txawv nrog rau tso tawm ntau yam khoom zoo xws li cov cuab yeej kuaj xyuas. Koj yuav pom tias dev cov cuab yeej cuam tshuam nws tus kheej yog customizable heev ntawm cov chaw nyob hauv seem no.

   

Mozilla Firefox

Firefox lub vev xaib tsim tawm ntu suav nrog cov cuab yeej rau cov neeg tsim qauv, cov tsim tawm, thiab cov neeg sim zoo ib yam li tus kws kho cov style thiab pixel-targeting eyedropper.

1. Xaiv Firefox's cov zaub mov tseem ceeb, sawv cev los ntawm peb kab kab rov tav thiab nyob rau sab xis sab xis ntawm lub qhov rais browser.

2. Thaum cov ntawv qhia zaub mov tshwm, xaiv Web Developer.

   

3. The Web Developer menu yuav tsum tau tshwm sim tam sim no, muaj cov kev xaiv hauv qab no. Koj yuav pom tias feem ntau cov ntawv qhia zaub mov muaj cov keyboard shortcuts txuam nrog lawv.

   • Toggle Tools: Qhia lossis zais cov cuab yeej tsim tawm, feem ntau muab tso rau hauv qab ntawm qhov browser qhov rai. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Tso cai rau koj los tshuaj xyuas thiab / lossis tweak CSS thiab HTML code ntawm nplooj ntawv nquag nrog rau ntawm lub cuab yeej nqa tau los ntawm cov chaw taws teeb debugging. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Console: Tso cai rau koj ua tiav JavaScript kab lus nyob rau hauv nplooj ntawv nquag nrog rau tshuaj xyuas cov ntaub ntawv sib txawv suav nrog kev ceeb toom kev nyab xeeb, kev thov hauv network, CSS cov lus, thiab ntau dua. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: Lub JavaScript Debugger cia koj txheeb xyuas thiab kho qhov tsis xws luag los ntawm kev teeb tsa cov ntsiab lus, tshuaj xyuas DOM nodes, lub thawv dub sab nraud, thiab ntau ntxiv. Raws li qhov teeb meem nrog Tus Kws Tshuaj, qhov no kuj tseem txhawb kev debugging tej thaj chaw deb. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: Tso cai rau koj los tsim cov ntawv tshiab tshiab thiab sib xyaw nrog cov nplooj ntawv web nquag, lossis kho cov nplooj ntawv uas twb muaj lawm thiab sim seb koj cov kev hloov pauv li cas hauv qhov browser nrog nias ib zaug xwb. Keyboard shortcut: Mac OS X, Windows (SHIFT+F7)
   • Performance: Muab cov ncauj lus kom ntxaws ntawm nplooj ntawv nquag ua haujlwm hauv lub network, cov ntaub ntawv tus lej tus lej, JavaScript ua tiav lub sijhawm thiab lub xeev, xim flashing, thiab ntau ntxiv. Keyboard shortcut: Mac OS X, Windows (SHIFT+F5)
   • Network: Sau txhua lub network thov pib los ntawm browser nrog rau cov txheej txheem sib xws, keeb kwm sau npe, hom, qhov loj me, thiab lub sijhawm dhau mus. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Saib seb lub cache thiab ncuav qab zib tau khaws cia los ntawm lub vev xaib. Keyboard shortcut: (SHIFT+F9)
   • Developer Toolbar: Qhib tus neeg txhais lus sib tham sib tham. Nkag mus pab rau hauv tus neeg txhais lus rau ib daim ntawv teev tag nrho cov lus txib muaj thiab lawv cov syntax kom raug. Keyboard shortcut: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Muab lub peev xwm los tsim thiab ua lub vev xaib los ntawm cov khoom siv tiag tiag uas khiav Firefox OS lossis ntawm Firefox OS Simulator. Keyboard shortcut: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: Muab kev ua haujlwm zoo ib yam li Web Console (saib saum toj). Txawm li cas los xij, tag nrho cov ntaub ntawv xa rov qab yog rau tag nrho Firefox daim ntawv thov (suav nrog txuas ntxiv thiab browser-theem ua haujlwm) tsis yog rau nplooj ntawv web nkaus xwb. Keyboard shortcut: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: Tso cai rau koj saib lub vev xaib tam sim hauv cov kev daws teeb meem sib txawv, kev teeb tsa, thiab qhov loj me ntawm cov tshuaj ntsuam kom ua raws li ntau yam khoom siv nrog rau cov ntsiav tshuaj thiab smartphones. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Eydropper: Qhia cov xim hex rau tus kheej xaiv pixels.
   • Scratchpad: Scratchpad tso cai rau koj sau, kho, sib koom ua ke thiab ua tiav snippets ntawm JavaScript code los ntawm lub qhov rais pop-out Firefox. Qhib cov ntaub ntawv sib tham sib JavaScript uas tso cai rau koj sau cov lej thiab sim nws tawm tsam lub vev xaib. Keyboard shortcut: (SHIFT+F4)
   • Cov Neeg Ua Haujlwm: Debug cov neeg ua haujlwm pabcuam koj daim ntawv thov web. Tau txais cov ntaub ntawv ntxaws ntxaws ntawm lawv qhov kev ua tau zoo thiab qhov tsis raug.
   • Page Source: Tus thawj browser-raws li cov cuab yeej tsim tawm, qhov kev xaiv no tsuas yog qhia cov lej muaj nyob rau nplooj ntawv nquag. Keyboard shortcut: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Tau Txais Cov Cuab Yeej Ntau : Qhib Web Developer's Toolbox sau rau ntawm Mozilla qhov chaw add-ons official, featuring txog kaum tawm nrov extensions xws li raws li Firebug thiab Greasemonkey.

   

Microsoft Edge/Internet Explorer

Feem ntau hu ua F12 Cov cuab yeej tsim tawm, kev hwm rau cov keyboard shortcut uas tau pib lub interface txij li dhau los ntawm Internet Explorer, cov cuab yeej dev hauv IE11 thiab Microsoft Edge tau los ntev heev txij li thaum nws pib los ntawm kev muab ib pab pawg neeg saib xyuas, debuggers, emulators, thiab on-the-fly compilers.

Microsoft tsis txhawb Internet Explorer ntxiv lawm thiab pom zoo kom koj hloov tshiab rau Edge browser tshiab. Lub taub hau mus rau lawv qhov chaw mus rub tawm qhov tshiab tshaj plaws.

1. Xaiv Ntau yam ua, sawv cev los ntawm peb dots thiab nyob rau sab xis sab xis ntawm lub qhov rais browser.

   

2. Thaum cov ntawv qhia zaub mov tshwm, xaiv qhov kev xaiv sau Developer Tools.

   

3. Kev txhim kho interface yuav tsum tam sim no tso tawm, feem ntau nyob hauv qab ntawm qhov browser qhov rai. Cov cuab yeej hauv qab no muaj, txhua tus tuaj yeem siv tau los ntawm nyem rau ntawm lawv cov kab ntawv tab lossis siv cov keyboard shortcut nrog.

   

   • DOM Explorer: Tso cai rau koj hloov kho cov ntawv teev npe thiab HTML hauv nplooj ntawv nquag, ua cov txiaj ntsig hloov pauv thaum koj mus. Siv IntelliSense kev ua haujlwm los ua kom tiav cov lej uas siv tau. Keyboard shortcut: (CTRL+1)
   • Console: Muab lub peev xwm xa cov ntaub ntawv debugging nrog rau cov txee, timers, kab, thiab cov lus hloov kho los ntawm kev sib koom ua ke API. Tsis tas li, cia koj txhaj cov lej rau hauv nplooj ntawv web nquag thiab hloov kho cov txiaj ntsig tau muab rau tus kheej hloov pauv hauv lub sijhawm tiag tiag. Keyboard shortcut: (CTRL+2)
   • Debugger: Cia koj teem caij so thiab debug koj cov cai thaum nws ua tiav, kab los ntawm kab yog tias tsim nyog. Keyboard shortcut: (CTRL+3)
   • Network: Sau txhua qhov kev thov network pib los ntawm browser thaum nplooj ntawv thauj khoom thiab ua tiav suav nrog cov ntsiab lus raws tu qauv, hom ntsiab lus, kev siv bandwidth, thiab ntau ntxiv. Keyboard shortcut: (CTRL+4)
   • Kev ua tau zoo: Cov ntsiab lus ntawm tus nqi, kev siv CPU, thiab lwm yam kev ntsuas ntsig txog kev ua haujlwm los pab koj ua kom nrawm nplooj ntawv lub sijhawm thiab lwm yam dej num. Keyboard shortcut: (CTRL+5)
   • Memory: Pab koj cais thiab kho qhov muaj peev xwm nco txog ntawm nplooj ntawv web tam sim no los ntawm kev nthuav qhia lub sijhawm siv lub cim xeeb nrog rau cov duab thaij duab los ntawm lub sijhawm sib txawv. Keyboard shortcut: (CTRL+6)
   • Emulation: Qhia koj li cas nplooj ntawv nquag yuav ua rau ntau yam kev daws teeb meem thiab qhov screen loj, emulating smartphones, ntsiav tshuaj, thiab lwm yam khoom siv. Nws kuj tseem muab lub peev xwm los hloov kho tus neeg siv tus neeg sawv cev thiab nplooj ntawv taw qhia, nrog rau simulate sib txawv geolocations los ntawm kev nkag mus rau lub latitude thiab longitude. Keyboard shortcut: (CTRL+7)

4. To tso saib Console thaum nyob rau hauv ib qho ntawm lwm yam cuab yeej nias lub square khawmnrog rau txoj cai bracket hauv nws, nyob hauv sab xis sab xis ntawm cov cuab yeej txhim kho interface.

   

5. Txhawm rau tshem tawm cov cuab yeej tsim tawm interface kom nws dhau los ua lub qhov rai cais, xaiv qhov ob daim duab plaub fab lossis siv cov keyboard shortcut nram qab no: CTRL+P. Koj tuaj yeem tso cov cuab yeej rov qab rau hauv lawv qhov chaw qub los ntawm nias CTRL + P ib zaug thib ob.

   

Apple Safari (Mac nkaus xwb)

Safari's ntau hom dev cov cuab yeej qhia txog cov neeg tsim khoom loj hauv zej zog uas siv Mac rau lawv qhov kev tsim thiab kev xav tau. Ntxiv nrog rau lub console muaj zog thiab cov tsoos log thiab debugging nta, ib qho yooj yim-rau-siv teb tsim hom thiab ib lub cuab tam los tsim koj tus kheej browser extensions kuj muab.

1. Xaiv Safari hauv browser zaub mov, nyob rau saum koj lub vijtsam. Thaum cov ntawv qhia zaub mov tshwm, xaiv Preferences. Koj tseem tuaj yeem siv cov keyboard shortcut hauv qab no los ntawm cov ntawv qhia zaub mov no: COMMAND+COMMA(,)

   

2. Safari's Preferences interface yuav tsum tau nthuav tawm tam sim no, overlaying koj lub qhov rais browser. Xaiv lub Advanced icon, nyob rau ntawm sab xis sab xis ntawm lub taub hau.

   

3. Qhov Advanced qhov nyiam yuav tsum pom tam sim no. Hauv qab ntawm qhov screen no yog ib qho kev xaiv sau Show Develop menu nyob rau hauv cov ntawv qhia zaub mov bar, nrog rau lub checkbox. Yog tsis muaj checkmark nyob rau hauv lub thawv, nyem rau ntawm nws ib zaug los tso ib qho rau ntawd.

   

4. Kaw Preferences interface.

5. Tam sim no koj yuav tsum pom qhov kev xaiv tshiab hauv browser zaub mov npe Develop, nyob nruab nrab ntawm Bookmarks thiab Window. Nyem rau ntawm cov ntawv qhia zaub mov no. Tam sim no daim ntawv qhia poob qis yuav tsum tau tshwm sim, muaj cov kev xaiv hauv qab no.

   • Qhib Nplooj Ntawv Nrog: Tso cai rau koj qhib lub vev xaib nquag hauv ib qho ntawm lwm qhov browsers tam sim no tau teeb tsa ntawm koj lub Mac.
   • User Agent: Cia koj xaiv los ntawm ntau dua kaum tus neeg siv tus neeg saib xyuas ua ntej qhov tseem ceeb suav nrog ntau lub versions ntawm Chrome, Firefox, thiab Internet Explorer, nrog rau txhais koj tus kheej kev cai string.
   • Nkag teb Kev Tsim Qauv: Renders nplooj ntawv tam sim no raws li nws yuav tshwm sim ntawm ntau yam khoom siv thiab ntawm qhov kev daws teeb meem sib txawv.
   • Show Web Inspector: Tua tawm lub ntsiab interface rau Safari's dev cov cuab yeej, feem ntau muab tso rau hauv qab ntawm koj lub browser screen thiab muaj cov ntu hauv qab no: Cov Ntsiab Lus, Network, Resources, Timelines, Debugger, Storage, Console.
   • Show yuam kev Console: Tsis tas li tso tawm cov cuab yeej siv cuam tshuam, ncaj qha mus rau Console tab uas qhia txog qhov yuam kev, ceeb toom, thiab lwm yam tshawb nrhiav log data.
   • Show Page Source: Qhib lub Resources tab, uas qhia qhov chaws rau nplooj ntawv nquag categorized los ntawm cov ntaub ntawv.
   • Show Page Resources: Ua haujlwm tib yam li qhov Kev Xaiv Nplooj Page.
   • Show Snippet Editor: Qhib lub qhov rais tshiab uas koj tuaj yeem nkag mus rau CSS thiab HTML code, saib ua ntej nws cov zis tawm ntawm-fly.
   • Show Extension Builder: Muab lub peev xwm los tsim lossis kho Safari txuas ntxiv nrog CSS, HTML, thiab JavaScript.
   • Show Timeline Recording: Qhib Lub Sijhawm tab thiab pib nthuav tawm cov kev thov hauv network, kev teeb tsa, thiab muab cov ntaub ntawv nrog rau JavaScript ua tiav hauv lub sijhawm.
   • Empty Caches: Tshem tawm tag nrho cov cache tam sim no khaws cia rau hauv koj lub hard drive.
   • Disable Caches: Nres Safari los ntawm caching kom tag nrho cov ntsiab lus rov qab los ntawm tus neeg rau zaub mov ntawm txhua nplooj ntawv thauj khoom.
   • Disable Images: Tiv thaiv cov duab los ntawm rendering ntawm txhua nplooj ntawv web.
   • Disable Styles: Tsis quav ntsej CSS cov khoom thaum nplooj ntawv thauj khoom.
   • Disable JavaScript: txwv JavaScript ua tiav ntawm txhua nplooj ntawv.
   • Disable Extensions: txwv tsis pub txhua qhov txuas ntxiv los ntawm kev khiav hauv browser.
   • Disable Site-specific Hacks: Yog Safari tau raug hloov kho los daws qhov teeb meem tshwj xeeb rau nplooj ntawv web, qhov kev xaiv no yuav thaiv cov kev hloov pauv kom nplooj ntawv loads raws li nws yuav muaj ua ntej cov kev hloov kho no tau qhia.
   • Disable Local File Restrictions: Tso cai rau tus browser kom nkag tau rau cov ntaub ntawv ntawm koj cov disks hauv zos, qhov kev txiav txim uas raug txwv los ntawm lub neej ntawd vim kev nyab xeeb.
   • Kev txwv hla dhau qhov keeb kwm: Cov kev txwv no tau muab tso rau hauv lub neej ntawd los tiv thaiv XSS thiab lwm yam kev phom sij. Txawm li cas los xij, feem ntau lawv yuav tsum tau ua tsis taus ib ntus rau kev txhim kho.
   • tso cai JavaScript los ntawm Kev Tshawb Fawb Kev Tshawb Fawb: Thaum qhib, nws muab lub peev xwm nkag mus rau URLs nrog javascript: suav ncaj qha rau hauv qhov chaw nyob.
   • Thiab SHA-1 Daim Ntawv Pov Thawj Ua Tsis Txaus Siab: Daim ntawv pov thawj SSL siv SHA-1 algorithm tau suav hais tias yog qhov tsis muaj hnub nyoog thiab muaj kev phom sij.