ಮುಖಪುಟ » ಸಾಫ್ಟ್ವೇರ್ » Chrome DevTools: ಡೆವಲಪರ್ ಪರಿಕರಗಳಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ
Chrome DevTools: ಡೆವಲಪರ್ ಪರಿಕರಗಳಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು ಸಂಪೂರ್ಣ ಮಾರ್ಗದರ್ಶಿ
Chrome DevTools ಬ್ರೌಸರ್ನಿಂದಲೇ ಯಾವುದೇ ವೆಬ್ಸೈಟ್ ಅನ್ನು ಆಳವಾಗಿ ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಇದರ ಎಲಿಮೆಂಟ್ಸ್, ನೆಟ್ವರ್ಕ್, ಮೂಲಗಳು ಮತ್ತು ಕನ್ಸೋಲ್ ಪ್ಯಾನೆಲ್ಗಳು ದೃಶ್ಯ ಡೀಬಗ್ ಮಾಡುವುದು, ಕಾರ್ಯಕ್ಷಮತೆ, ಸಂಪನ್ಮೂಲಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿವೆ.
ಲೈಟ್ಹೌಸ್ ಮತ್ತು ರೆಕಾರ್ಡರ್ ಕಾರ್ಯದೊಂದಿಗೆ, ನೀವು ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ನೈಜ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಆಡಿಟ್ ಮಾಡಬಹುದು.
ವೆಬ್ಸೈಟ್ನ ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ಸರ್ಚ್ ಇಂಜಿನ್ ಶ್ರೇಯಾಂಕವನ್ನು ಸುಧಾರಿಸಲು ಬಯಸುವ ಯಾವುದೇ ವೆಬ್ ಡೆವಲಪರ್, ಡಿಸೈನರ್ ಅಥವಾ SEO ತಜ್ಞರಿಗೆ Chrome DevTools ಅನಿವಾರ್ಯ ಸಂಗಾತಿಯಾಗಿದೆ. Google Chrome ಗೆ ಸಂಯೋಜಿಸಲಾದ ಈ ಪರಿಕರಗಳು, ವೆಬ್ಸೈಟ್ ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಮೇಲೆ ಆಳವಾದ ಒಳನೋಟಗಳು ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತವೆ, HTML ಮತ್ತು CSS ಪರಿಶೀಲನೆಯಿಂದ ಸಮಗ್ರ ನೆಟ್ವರ್ಕ್ ಚಟುವಟಿಕೆ ವಿಶ್ಲೇಷಣೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆ ಮತ್ತು ಮೊಬೈಲ್ ಆಪ್ಟಿಮೈಸೇಶನ್ವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಅನುಮತಿಸುತ್ತದೆ.
ಯಾವುದೇ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು, ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲು ಮತ್ತು ಪತ್ತೆಹಚ್ಚಲು ನೀವು Chrome DevTools ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಅದರ ಎಲ್ಲಾ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಬಯಸುವಿರಾ? ಈ ಲೇಖನದಲ್ಲಿ, ಈ ಪರಿಕರಗಳಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದ ಎಲ್ಲವನ್ನೂ ನಾವು ಉದಾಹರಣೆಗಳು ಮತ್ತು ಸಲಹೆಗಳೊಂದಿಗೆ ಸ್ಪಷ್ಟವಾಗಿ ವಿವರಿಸುತ್ತೇವೆ, ಅವುಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಹೇಗೆ ತೆರೆಯುವುದು, ಪ್ರತಿ ಪ್ಯಾನೆಲ್ನೊಂದಿಗೆ ನೀವು ಏನನ್ನು ವಿಶ್ಲೇಷಿಸಬಹುದು, ಪ್ರತಿಯೊಂದು ಕಾರ್ಯವು ಯಾವುದಕ್ಕಾಗಿ ಮತ್ತು ಅಭಿವೃದ್ಧಿ ಮತ್ತು SEO ಎರಡರಲ್ಲೂ ಅವುಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸುವುದು ಎಂಬುದನ್ನು ಒಳಗೊಂಡಂತೆ.
Chrome DevTools ಎಂದರೇನು ಮತ್ತು ಅವು ಏಕೆ ತುಂಬಾ ಶಕ್ತಿಶಾಲಿಯಾಗಿವೆ?
Chrome DevTools ಡೆವಲಪರ್ ಪರಿಕರಗಳ ಸೂಟ್ Google Chrome ನಲ್ಲಿ ಅಂತರ್ನಿರ್ಮಿತ ಫಲಕವಾಗಿದ್ದು, ಯಾವುದೇ ಬಳಕೆದಾರರು ಹೆಚ್ಚುವರಿ ಪ್ಲಗಿನ್ಗಳನ್ನು ಸ್ಥಾಪಿಸದೆಯೇ ಯಾವುದೇ ವೆಬ್ಸೈಟ್ನ ಕೋಡ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ವಿಶ್ಲೇಷಿಸಲು, ಡೀಬಗ್ ಮಾಡಲು ಮತ್ತು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ . ಅದರ ಹಲವಾರು ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳ ಮೂಲಕ, ನೀವು ಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸಬಹುದು, ನೈಜ ಸಮಯದಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು, ನೆಟ್ವರ್ಕ್ ಚಟುವಟಿಕೆಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಬಹುದು, ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಬಹುದು, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಬಹುದು ಮತ್ತು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ವೆಬ್ಸೈಟ್ ನಡವಳಿಕೆಯನ್ನು ಅನುಕರಿಸಬಹುದು . ಇದರ ವ್ಯಾಪ್ತಿಯು ಕೇವಲ "ಮೂಲ ಕೋಡ್ ಅನ್ನು ವೀಕ್ಷಿಸುವುದನ್ನು" ಮೀರಿದೆ: ವೆಬ್ಸೈಟ್ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತದೆ, Google ಅದನ್ನು ಹೇಗೆ ಅರ್ಥೈಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು ವಿಭಿನ್ನ ಸಾಧನಗಳು ಅಥವಾ ಸಂಪರ್ಕಗಳಿಂದ ಅದನ್ನು ಹೇಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ಅನುಭವಿಸಲು ಇದು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
Chrome DevTools ಅನ್ನು ಹೇಗೆ ಪ್ರವೇಶಿಸುವುದು: ತ್ವರಿತ ಶಾರ್ಟ್ಕಟ್ಗಳು ಮತ್ತು ಸಂದರ್ಭ ಮೆನು
Chrome DevTools ಅನ್ನು ಪ್ರವೇಶಿಸುವುದು ನಂಬಲಾಗದಷ್ಟು ಸುಲಭ ಮತ್ತು ನಿಮ್ಮ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ ಮತ್ತು ಆದ್ಯತೆಗಳನ್ನು ಅವಲಂಬಿಸಿ ಅದನ್ನು ಮಾಡಲು ಹಲವಾರು ಮಾರ್ಗಗಳಿವೆ:
ನೀವು ವಿಶ್ಲೇಷಿಸಲು ಬಯಸುವ ಪುಟದ ಮೇಲೆ ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ. ಮತ್ತು "ಪರಿಶೀಲಿಸು" ಆಯ್ಕೆಮಾಡಿ. ಇದು ಅತ್ಯಂತ ದೃಶ್ಯ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ವಿಧಾನವಾಗಿದೆ.
ಬಳಸಿ ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್ಕಟ್ಗಳು ನಿಮ್ಮ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ಗೆ ನಿರ್ದಿಷ್ಟ: Windows / ಲಿನಕ್ಸ್: Ctrl + Shift + I ಮ್ಯಾಕ್: Cmd + ಆಯ್ಕೆ + I.
ನೀವು Chrome ಮೆನುಗೆ (ವಿಳಾಸ ಪಟ್ಟಿಯ ಬಲಭಾಗದಲ್ಲಿರುವ ಮೂರು ಲಂಬ ಚುಕ್ಕೆಗಳು) ಹೋಗಿ, ಇನ್ನಷ್ಟು ಪರಿಕರಗಳು > ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು.
ಕೀಬೋರ್ಡ್ ಬಳಸಿ ನೇರವಾಗಿ ನಿರ್ದಿಷ್ಟ ಪ್ಯಾನೆಲ್ಗಳನ್ನು ತೆರೆಯಲು:
ಎಲಿಮೆಂಟ್ಸ್ ಪ್ಯಾನೆಲ್ (HTML/CSS): Ctrl + ಶಿಫ್ಟ್ + C (Windows/Linux) ಅಥವಾ Cmd + Option + C (Mac)
ಬಳಸಿದ ಕೊನೆಯ ಫಲಕ: F12 (ಹೆಚ್ಚಿನ ಸಿಸ್ಟಂಗಳಲ್ಲಿ) ಅಥವಾ Ctrl + Shift + I / Cmd + Option + I
ಪ್ರತಿ ಹೊಸ ಟ್ಯಾಬ್ನಲ್ಲಿ DevTools ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೆರೆಯಿರಿ (ಡೀಬಗ್ ಮಾಡುವುದರಲ್ಲಿ ಸಮಯ ಕಳೆಯುವವರಿಗೆ ತುಂಬಾ ಉಪಯುಕ್ತ): ಆಯ್ಕೆಯೊಂದಿಗೆ Chrome ಅನ್ನು ರನ್ ಮಾಡಿ --auto-open-devtools-for-tabs ಆಜ್ಞಾ ಸಾಲಿನಿಂದ.
ಮರೆಯಬೇಡಿ: ನೀವು DevTools ಅನ್ನು ತೆರೆದಾಗ, ನೀವು ಅವುಗಳನ್ನು ವಿಂಡೋದ ಬಲಕ್ಕೆ, ಎಡಕ್ಕೆ, ಕೆಳಭಾಗಕ್ಕೆ ಅಥವಾ ಪ್ರತ್ಯೇಕ ವಿಂಡೋದಲ್ಲಿ ಪಿನ್ ಮಾಡಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಬಹುದು - ನೀವು ಬಹು ಪರದೆಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿದ್ದರೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
Chrome DevTools ಬಳಸಿ ನೀವು ಏನು ಮಾಡಬಹುದು? ಅದರ ಮುಖ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳ ನೋಟ
Chrome DevTools ಅನ್ನು ಬಹು ಪ್ಯಾನೆಲ್ಗಳಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ. ಪ್ರತಿಯೊಂದೂ ವೆಬ್ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್ನ ಅಗತ್ಯ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿದೆ. ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಪ್ಯಾನೆಲ್ಗಳು ಮತ್ತು ಅವುಗಳ ಅತ್ಯಂತ ಪ್ರಸ್ತುತ ಕಾರ್ಯಗಳು ಇಲ್ಲಿವೆ:
ಎಲಿಮೆಂಟ್ಸ್ ಪ್ಯಾನೆಲ್: DOM ಮತ್ತು CSS ನ ನೇರ ಪರಿಶೀಲನೆ ಮತ್ತು ಸಂಪಾದನೆ.
ಈ ಫಲಕವು ಹೆಚ್ಚಿನ ಡೀಬಗ್ ಮಾಡುವಿಕೆ ಮತ್ತು ದೃಶ್ಯ ವಿಶ್ಲೇಷಣೆ ಕಾರ್ಯಗಳಿಗೆ ಆರಂಭಿಕ ಹಂತವಾಗಿದೆ. ಇದು ನಿಮಗೆ ಇವುಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ:
DOM (ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾದರಿ) ನ ನಿಖರವಾದ ರಚನೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ. ಬ್ರೌಸರ್ ರೆಂಡರಿಂಗ್ ಆಗುತ್ತಿದೆ, ಅಂದರೆ, ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ರನ್ ಮಾಡಿದ ನಂತರ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ Google ನಿಜವಾಗಿ ನೋಡುವುದು.
HTML ಮತ್ತು CSS ಅನ್ನು ಕ್ಷಣಾರ್ಧದಲ್ಲಿ ಮಾರ್ಪಡಿಸಿ, ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ಬದಲಾವಣೆಗಳು ಹೇಗೆ ಕಾಣುತ್ತವೆ ಎಂಬುದನ್ನು ತಕ್ಷಣ ಪರಿಶೀಲಿಸುವುದು (ನಿಜವಾದ ಮೂಲ ಕೋಡ್ಗೆ ಧಕ್ಕೆಯಾಗದಂತೆ ಮೂಲಮಾದರಿ ಮಾಡಲು ಅಥವಾ ಹೊಸ ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಉತ್ತಮವಾಗಿದೆ).
ತರಗತಿಗಳು ಮತ್ತು ಶೈಲಿಗಳನ್ನು ನಿರ್ವಹಿಸಿ ಅಂಶಗಳ: ನೀವು ಹೊಸ ತರಗತಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು, ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು ಅಥವಾ ಪರೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ದೃಶ್ಯ ವಿವರಗಳನ್ನು ಸಂಪಾದಿಸಬಹುದು.
ವಿಶೇಷ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವೀಕ್ಷಿಸಿ ಮತ್ತು ನಿರ್ವಹಿಸಿ (ಡೇಟಾ-ನೋಸ್ನಿಪೆಟ್ ನಂತಹವು), ಇವು SEO ಗೆ ಮೂಲಭೂತವಾಗಿವೆ, ಏಕೆಂದರೆ Google ನಿರ್ದಿಷ್ಟ ವಿಷಯವನ್ನು ಸೂಚಿಕೆ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ನೀವು ಪರಿಶೀಲಿಸಬಹುದು.
ಬಳಕೆದಾರ ಕ್ರಿಯೆಯ ನಂತರ ಮಾತ್ರ ಗೋಚರಿಸುವ ಅಂಶಗಳು ಅಥವಾ ಬ್ಲಾಕ್ಗಳಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ (ಉದಾಹರಣೆಗೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಟ್ಯಾಬ್ಗಳು ಅಥವಾ ಡ್ರಾಪ್ಡೌನ್ಗಳು).
ಕನ್ಸೋಲ್ನಲ್ಲಿ ಪರಿಶೀಲಿಸಿದ ಐಟಂಗೆ $0 ನಂತೆ ತ್ವರಿತ ಪ್ರವೇಶ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ನೇರವಾಗಿ ಅದನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಸಲಹೆ! ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ ನಿಜವಾಗಿಯೂ ಸ್ಪಂದಿಸುವಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ನೀವು ಈ ಪ್ಯಾನೆಲ್ನಿಂದ ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ಮೊಬೈಲ್ ಸಾಧನಗಳನ್ನು ಸಹ ಅನುಕರಿಸಬಹುದು.
ನೆಟ್ವರ್ಕ್ ಪ್ಯಾನಲ್: ಸಂಪನ್ಮೂಲ ಲೋಡ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುತ್ತದೆ, ವಿಳಂಬವನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಧಾನ ಸಂಪರ್ಕಗಳನ್ನು ಅನುಕರಿಸುತ್ತದೆ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿಶ್ಲೇಷಣೆಗೆ ಅಗತ್ಯವಾದ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ . ಇಲ್ಲಿ ನೀವು ಅದನ್ನು ಕಾಲಾನುಕ್ರಮದಲ್ಲಿ ಮತ್ತು ವಿವರವಾಗಿ ನೋಡಬಹುದು:
ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡುವಾಗ ವಿನಂತಿಸಿದ ಎಲ್ಲಾ ಸಂಪನ್ಮೂಲಗಳು (HTML, ಚಿತ್ರಗಳು, CSS, JS, ವೀಡಿಯೊಗಳು, ಫಾಂಟ್ಗಳು, ಇತ್ಯಾದಿ.).
ಅವುಗಳನ್ನು ಯಾವ ಕ್ರಮದಲ್ಲಿ ಡೌನ್ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ, ಲೋಡಿಂಗ್ ಸಮಯ ಮತ್ತು ಗಾತ್ರ ಪ್ರತಿಯೊಂದು ಸಂಪನ್ಮೂಲದ: ಅಡಚಣೆಗಳು ಅಥವಾ ಅನಗತ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಗುರುತಿಸುವ ಕೀಲಿಕೈ.
ಪ್ರತಿಯೊಂದು ಸಂಪನ್ಮೂಲದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದರ ಮೂಲಕ ನೀವು ಪರಿಶೀಲಿಸಬಹುದು HTTP ಹೆಡರ್ಗಳು, ಕ್ಯಾಶಿಂಗ್ ನೀತಿಗಳು, ಪ್ರತಿಕ್ರಿಯೆ ಸಮಯಗಳು, ಮತ್ತು ಮಿನಿಮೈಸ್ ಮಾಡಿದ ಫೈಲ್ಗಳಿವೆಯೇ ಎಂದು ಸಹ ನೋಡಿ.
ನಿಧಾನ ಸಂಪರ್ಕಗಳ ಸಿಮ್ಯುಲೇಶನ್ (3G, 4G, ಇತ್ಯಾದಿ), ನಿಮ್ಮ ಸ್ವಂತ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ಮಾತ್ರವಲ್ಲದೆ ನಿಮ್ಮ ಬಳಕೆದಾರರ ಸಾಧನಗಳಲ್ಲಿಯೂ ನಿಜವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೋಡಲು.
ಗಾಗಿ ಕಾರ್ಯ ಸಂಗ್ರಹವನ್ನು ತೆರವುಗೊಳಿಸಿ ಮತ್ತು ಮರುಲೋಡ್ ಮಾಡಿ, ಹೊಸ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಪರಿಶೀಲಿಸಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
ವಿನಂತಿ ನಿರ್ಬಂಧಿಸುವಿಕೆ: ಕೆಲವು ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ವಿತರಿಸುವುದರ ಪರಿಣಾಮವನ್ನು ವಿಶ್ಲೇಷಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, main.css ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು ಮತ್ತು ಪುಟವು ಹೇಗೆ ತಪ್ಪಾಗಿ ಕಾನ್ಫಿಗರ್ ಆಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡುವುದು).
ಸುಧಾರಿತ ಫಿಲ್ಟರಿಂಗ್: ಫೈಲ್ ಪ್ರಕಾರ, ಮೂಲ ಡೊಮೇನ್, ನಿಯಮಿತ ಅಭಿವ್ಯಕ್ತಿಗಳು ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಹುಡುಕಾಟ, ಬಾಹ್ಯ ಡೌನ್ಲೋಡ್ಗಳನ್ನು ಆಡಿಟ್ ಮಾಡಲು ಅಥವಾ ಭದ್ರತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಸೂಕ್ತವಾಗಿದೆ.
ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲಾಗುತ್ತಿದೆ ಪುಟ ಲೋಡ್ನ ವಿವಿಧ ಹಂತಗಳಲ್ಲಿ, ಬಳಕೆದಾರರಿಗೆ ಹಂತ ಹಂತವಾಗಿ ಏನು ತೋರಿಸಲಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ನೋಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ನಿರ್ದಿಷ್ಟವಾಗಿ SEO ಮತ್ತು WPO ಗಾಗಿ: ಮೊದಲು ಏನು ಲೋಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಅದು ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ವೆಬ್ ವೈಟಲ್ಗಳ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಎಂಬುದನ್ನು ವಿಶ್ಲೇಷಿಸಿ , Google ಮತ್ತು ನಿಮ್ಮ ಸಂದರ್ಶಕರಿಗೆ ಅನುಭವವನ್ನು ಹೇಗೆ ಅತ್ಯುತ್ತಮವಾಗಿಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ.
ಕನ್ಸೋಲ್ ಪ್ಯಾನಲ್: ಡೀಬಗ್ ಮಾಡಿ, ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ರನ್ ಮಾಡಿ ಮತ್ತು ನೈಜ-ಸಮಯದ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಪಡೆಯಿರಿ.
ಕನ್ಸೋಲ್ನಲ್ಲಿ ನೀವು ವೆಬ್ಸೈಟ್ನಿಂದ ನೀಡಲಾದ ಲಾಗ್ಗಳು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳು ಮತ್ತು ಭದ್ರತಾ ಎಚ್ಚರಿಕೆಗಳನ್ನು ನೈಜ ಸಮಯದಲ್ಲಿ ವೀಕ್ಷಿಸಬಹುದು . ನೀವು ಇವುಗಳನ್ನು ಸಹ ಮಾಡಬಹುದು:
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಜ್ಞೆಗಳನ್ನು ನೇರವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿ ತೆರೆದ ಪುಟದಲ್ಲಿ, ತ್ವರಿತ ಪರೀಕ್ಷೆಗಳು ಅಥವಾ ಯಾಂತ್ರೀಕೃತಗೊಳಿಸುವಿಕೆಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
ವೇರಿಯೇಬಲ್ ಬಳಸಿ ಕೊನೆಯದಾಗಿ ಪರಿಶೀಲಿಸಲಾದ ಅಂಶದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿ $0 (ಮತ್ತು $1, $2, ಇತ್ಯಾದಿ), ಮುಂದುವರಿದ ಡೀಬಗ್ ಮಾಡುವಿಕೆಯನ್ನು ವೇಗಗೊಳಿಸುತ್ತದೆ.
ಆಕ್ಷೇಪಾರ್ಹ JS ಫೈಲ್ನ ಸಾಲಿಗೆ ನೇರವಾಗಿ ಹೋಗಲು ದೋಷಗಳು ಅಥವಾ ಎಚ್ಚರಿಕೆಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.
ಮೂಲಗಳ ಫಲಕ: ಸ್ಥಿರ ಫೈಲ್ಗಳು ಮತ್ತು ಬಾಹ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ವೀಕ್ಷಿಸಿ ಮತ್ತು ಡೀಬಗ್ ಮಾಡಿ
ಈ ವಿಭಾಗವು ವೆಬ್ಸೈಟ್ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾದ ಫೈಲ್ಗಳ ರಚನೆಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ : ಸ್ಕ್ರಿಪ್ಟ್ಗಳು, ಶೈಲಿಗಳು, ಚಿತ್ರಗಳು, ಇತ್ಯಾದಿ, ಡೊಮೇನ್ಗಳಿಂದ ಆಯೋಜಿಸಲಾಗಿದೆ:
ನೀವು Google Fonts ನಂತಹ ಬಾಹ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತೀರಾ ಎಂದು ಕಂಡುಹಿಡಿಯಿರಿ.ಮತ್ತು ವೇಗವನ್ನು ಪಡೆಯಲು ಅವುಗಳನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಹೋಸ್ಟ್ ಮಾಡುವ ಬಗ್ಗೆ ಯೋಚಿಸುತ್ತಿದೆ.
ಇದು ಪರೀಕ್ಷೆಗಾಗಿ ಮೂಲ ಫೈಲ್ಗಳನ್ನು ತೆರೆಯಲು, ಸಂಪಾದಿಸಲು ಮತ್ತು ಉಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಮಿನಿಫೈಡ್ ಸ್ಕ್ರಿಪ್ಟ್ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಿ, ಹೆಚ್ಚಿನ ಓದುವಿಕೆಗಾಗಿ ಕೋಡ್ ಅನ್ನು ವಿಸ್ತರಿಸಿ ಮತ್ತು ಗುಪ್ತ ಅವಲಂಬನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.
ರೆಕಾರ್ಡರ್: ಬಳಕೆದಾರರ ಪ್ರಯಾಣವನ್ನು ಅನುಕರಿಸುತ್ತದೆ ಮತ್ತು ಅವರ ನೈಜ ಅನುಭವವನ್ನು ಅಳೆಯುತ್ತದೆ.
ರೆಕಾರ್ಡಿಂಗ್ ಕಾರ್ಯವು ಬಳಕೆದಾರರ ನಿಜವಾದ ಬ್ರೌಸಿಂಗ್ ಅನ್ನು ಅನುಕರಿಸಲು ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ:
ನೀವು ನ್ಯಾವಿಗೇಷನ್ ಹರಿವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಬಹುದು (ಉದಾ. ಮೆನುಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದು, ಫಾರ್ಮ್ಗಳನ್ನು ಭರ್ತಿ ಮಾಡುವುದು, ಒಂದು ಪುಟದಿಂದ ಇನ್ನೊಂದು ಪುಟಕ್ಕೆ ಚಲಿಸುವುದು), ವೆಬ್ಸೈಟ್ ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಪ್ರತಿ ಕ್ರಿಯೆಯ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ವಿಶ್ಲೇಷಿಸಬಹುದು.
ಪರಿವರ್ತನೆಗಳು ಅಥವಾ UX ಗಾಗಿ ನಿರ್ಣಾಯಕ ಮಾರ್ಗಗಳಲ್ಲಿನ ಅಡಚಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಸೂಕ್ತವಾಗಿದೆ.
ಲೈಟ್ಹೌಸ್: ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳ ಸಮಗ್ರ ಲೆಕ್ಕಪರಿಶೋಧನೆ.
ನಿರ್ವಹಿಸಿ ಸ್ವಯಂಚಾಲಿತ ಲೆಕ್ಕಪರಿಶೋಧನೆಗಳು ಕಾರ್ಯಕ್ಷಮತೆ (WPO), ಪ್ರವೇಶಿಸುವಿಕೆ, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು, SEO ಮತ್ತು PWA (ಪ್ರಗತಿಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳು).
ಒದಗಿಸುತ್ತದೆ ಒಟ್ಟಾರೆ ಸ್ಕೋರ್ ಮತ್ತು ಈಗಾಗಲೇ ಪ್ರಕಟವಾದ ಮತ್ತು ಅಭಿವೃದ್ಧಿ ಹಂತದಲ್ಲಿರುವ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ಪ್ರತಿ ವಿಭಾಗಕ್ಕೂ ಕಾರ್ಯಸಾಧ್ಯವಾದ ಶಿಫಾರಸುಗಳು.
ಇದು ವೆಬ್ಸೈಟ್ ಅನ್ನು ಡೆಸ್ಕ್ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಮೋಡ್ನಲ್ಲಿ ವಿಶ್ಲೇಷಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದು ಮೊಬೈಲ್ ಸ್ನೇಹಪರತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ತುಂಬಾ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಿಕೆಗಳು: WPO ಮತ್ತು SEO ಗಾಗಿ DevTools ಅನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು
ಚಿತ್ರಗಳು ಮತ್ತು ದೊಡ್ಡ ಫೈಲ್ಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ ನೆಟ್ವರ್ಕ್ ಟ್ಯಾಬ್ನಿಂದ ಮತ್ತು ಅದರ ಆಪ್ಟಿಮೈಸೇಶನ್ಗೆ ಆದ್ಯತೆ ನೀಡಿ (ಸಂಕೋಚನ, ಹೊಸ ಸ್ವರೂಪಗಳು, ಸೋಮಾರಿ ಲೋಡ್).
ಬಾಹ್ಯ ಸಂಪನ್ಮೂಲ ಲೋಡ್ ಅನ್ನು ಮೌಲ್ಯಮಾಪನ ಮಾಡಿಸಮಯ ದೀರ್ಘವಾಗಿದ್ದರೆ, ಅವುಗಳನ್ನು ನಿಮ್ಮ ಸ್ವಂತ ಸರ್ವರ್ನಿಂದ ಡೌನ್ಲೋಡ್ ಮಾಡುವುದನ್ನು ಪರಿಗಣಿಸಿ.
ಲೋಡಿಂಗ್ ಆದ್ಯತೆಯನ್ನು ಮರುಕ್ರಮಗೊಳಿಸಿ ಇದರಿಂದ ನಿರ್ಣಾಯಕ ವಸ್ತುಗಳನ್ನು ಮೊದಲು ನೀಡಲಾಗುತ್ತದೆ (ವಿಮರ್ಶಾತ್ಮಕ ಹಾದಿ).
ನೆಟ್ವರ್ಕ್ ಪ್ಯಾನೆಲ್ನಿಂದ ಕ್ಯಾಶ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ ಬದಲಾವಣೆಗಳನ್ನು ವಿಶ್ಲೇಷಿಸುವಾಗ, ಮಾಹಿತಿಯನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಮೊಬೈಲ್ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಧಾನ ಸಂಪರ್ಕ ಸಿಮ್ಯುಲೇಟರ್ ಬಳಸಿ.
ಸಂಪನ್ಮೂಲ ಕನಿಷ್ಠೀಕರಣ (CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್)
ಫಾಂಟ್ಗಳ ಟ್ಯಾಬ್ನಲ್ಲಿ, ದೊಡ್ಡ ಗಾತ್ರದ, ಕಡಿಮೆ ಮಾಡದ ಅಥವಾ ನಕಲಿ ಫೈಲ್ಗಳನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತದೆ.
ವಿನಂತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಲೋಡ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸಲು CSS ಮತ್ತು JS ಅನ್ನು ಏಕೀಕರಿಸಿ ಮತ್ತು ಕಡಿಮೆ ಮಾಡಿ.
ರಚನಾತ್ಮಕ ವಿಶ್ಲೇಷಣೆ, ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು SEO
ಶೀರ್ಷಿಕೆಗಳು, ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು HTML ಶಬ್ದಾರ್ಥಗಳ ರಚನೆಯನ್ನು ಪರಿಶೀಲಿಸಿ.: ತಾರ್ಕಿಕ ರಚನೆ (h2, h3, ALT ಟ್ಯಾಗ್ಗಳು, ಪಾತ್ರಗಳು) Google ಗೆ ಸೂಕ್ತವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಲೈಟ್ಹೌಸ್ನೊಂದಿಗೆ ಪರಿಶೀಲಿಸಿ ಅಗತ್ಯ ಲೇಬಲ್ಗಳು ಮತ್ತು ಡೇಟಾದ ಉಪಸ್ಥಿತಿ SEO, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು PWA ಗಾಗಿ.
ರೆಂಡರಿಂಗ್ ಮೇಲೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಪ್ರಭಾವವನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಮತ್ತು ಲೋಡ್ ಮಾಡುವಾಗ ಬಳಕೆದಾರರ ಸಂವಹನವು ಗೋಚರಿಸದಿದ್ದರೆ ಅದನ್ನು Google ಅರ್ಥೈಸಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ.
ಕುಕೀಗಳು, ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಇತರ ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲಗಳ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುತ್ತದೆ.
ಸ್ಕ್ರ್ಯಾಪಿಂಗ್ ಅಥವಾ ರಫ್ತುಗಾಗಿ ವಿಷಯದ ಹೊರತೆಗೆಯುವಿಕೆ ಮತ್ತು ಕುಶಲತೆ
ದೊಡ್ಡ ಕೋಷ್ಟಕಗಳು ಅಥವಾ ಪಟ್ಟಿಗಳನ್ನು ಸ್ಪ್ರೆಡ್ಶೀಟ್ಗಳು ಅಥವಾ ಕೋಡ್ ಸಂಪಾದಕರಿಗೆ ನೇರವಾಗಿ ರಫ್ತು ಮಾಡಲು ನೀವು "ಅಂಶವನ್ನು ನಕಲಿಸಿ" ಅನ್ನು ಬಳಸಬಹುದು.
ಪರದೆಯ ಮೇಲಿನ ವಿಷಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಂಪಾದಿಸಲು, ಸೆರೆಹಿಡಿಯುವಿಕೆಗಳನ್ನು ತಯಾರಿಸಲು ಅಥವಾ ಸಂಬಂಧಿತ ಮಾಹಿತಿಯನ್ನು ರಫ್ತು ಮಾಡಲು ಕನ್ಸೋಲ್ ಮತ್ತು ವಿನ್ಯಾಸ ಮೋಡ್ ಅನ್ನು ಬಳಸಿ.
ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣ ಮತ್ತು ಡೀಬಗ್ ಮಾಡುವಿಕೆ
ಅನ್ವಯಿಸುವ ಮೂಲಕ ಜಾಹೀರಾತು ಬ್ಯಾನರ್ಗಳು ಅಥವಾ ಕಿರಿಕಿರಿ ಅಂಶಗಳನ್ನು ನೇರವಾಗಿ ಮರೆಮಾಡಿ ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ ಇನ್ಸ್ಪೆಕ್ಟರ್ ಮೂಲಕ.
ಆಯ್ದ ಅಂಶಗಳಲ್ಲಿ ಆಜ್ಞೆಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅಥವಾ ಪುಟ ಸಂಪಾದನೆ ಮೋಡ್ ಅನ್ನು ಆನ್ ಮತ್ತು ಆಫ್ ಮಾಡಲು ಟಾಗಲ್ ಮಾಡಲು ಕನ್ಸೋಲ್ನಿಂದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.
ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ Chrome DevTools ನ ಮಿತಿಗಳು
"ಇನ್ಸ್ಪೆಕ್ಟ್ ಎಲಿಮೆಂಟ್" ಮತ್ತು ಎಲ್ಲಾ ಕ್ರೋಮ್ ಡೆವ್ಟೂಲ್ಗಳು ಯಾವಾಗಲೂ ಡೆಸ್ಕ್ಟಾಪ್ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಲಭ್ಯವಿದ್ದರೂ, ಡೆವ್ಟೂಲ್ಗಳನ್ನು ಸ್ಮಾರ್ಟ್ಫೋನ್ಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಪ್ರವೇಶಿಸಲಾಗುವುದಿಲ್ಲ . ಇದಕ್ಕೆ ಎರಡು ಕಾರಣಗಳಿವೆ: ಇಂಟರ್ಫೇಸ್ ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ ಅಪ್ರಾಯೋಗಿಕವಾಗಿರುತ್ತದೆ ಮತ್ತು ಮೌಸ್ ನಿಖರತೆಯು ಹೊಂದಾಣಿಕೆಯಾಗುತ್ತದೆ. ಅದೃಷ್ಟವಶಾತ್, ನೀವು ನಿಮ್ಮ ಡೆಸ್ಕ್ಟಾಪ್ನಿಂದ ಮೊಬೈಲ್ ಅನುಭವವನ್ನು ಅನುಕರಿಸಬಹುದು ಅಥವಾ ನೈಜ ಸಮಯದಲ್ಲಿ ಸೈಟ್ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ಗೆ ಭೌತಿಕ ಸಾಧನವನ್ನು ಸಂಪರ್ಕಿಸಬಹುದು, ಇದು ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್ ಡೆವಲಪರ್ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಮೌಲ್ಯಯುತವಾಗಿದೆ. iOS ಹೊಂದಿರುವ ಮ್ಯಾಕ್ನಲ್ಲಿ, ನೀವು "ಸೆಟ್ಟಿಂಗ್ಗಳು > ಸುಧಾರಿತ" ನಲ್ಲಿ ಅನುಗುಣವಾದ ಆಯ್ಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ಎರಡೂ ಸಾಧನಗಳಲ್ಲಿ ಒಂದೇ ಐಕ್ಲೌಡ್ ಖಾತೆಯನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.
ಸುಧಾರಿತ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು: ಡೀಬಗ್ ಮಾಡುವುದರಿಂದ ಹಿಡಿದು ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವವರೆಗೆ
SEO ಅಭಿವೃದ್ಧಿ ಮತ್ತು ವಿಶ್ಲೇಷಣೆಯಲ್ಲಿನ ಕ್ಲಾಸಿಕ್ ಬಳಕೆಗಳ ಜೊತೆಗೆ, Chrome DevTools ಬಹಳ ಪ್ರಾಯೋಗಿಕ ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ:
ನೆಟ್ವರ್ಕ್ ವೈಫಲ್ಯದ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನುಕರಿಸಲು ನಿರ್ದಿಷ್ಟ ಫೈಲ್ಗಳನ್ನು (ಉದಾಹರಣೆ: main.css) ಲೋಡ್ ಮಾಡುವುದನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ಮತ್ತು ವೆಬ್ಸೈಟ್ ವೈಫಲ್ಯಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ.
ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹಂತ ಹಂತವಾಗಿ ನೋಡಲು ನೆಟ್ವರ್ಕ್ ಪ್ಯಾನೆಲ್ನಲ್ಲಿರುವ ಸ್ಕ್ರೀನ್ಶಾಟ್ ಕಾರ್ಯವನ್ನು ಬಳಸಿ ಮತ್ತು ಕೆಲವು ಪ್ರಮುಖ ಅಂಶಗಳು ಹೇಗೆ ಮತ್ತು ಯಾವಾಗ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ಚೆನ್ನಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ.
ಜಾಗತಿಕ ಹುಡುಕಾಟ ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ನಿರ್ದಿಷ್ಟ HTTP ಹೆಡರ್ಗಳು ಅಥವಾ ಪ್ರತಿಕ್ರಿಯೆಗಳಿಗಾಗಿ ಹುಡುಕಿ (ಉದಾ. ಯಾವ ಸಂಪನ್ಮೂಲಗಳು ಸೂಕ್ತ ಕ್ಯಾಶಿಂಗ್ ನೀತಿಗಳನ್ನು ಬಳಸುತ್ತವೆ ಎಂಬುದನ್ನು ಕಂಡುಹಿಡಿಯಲು).
ಬಾಹ್ಯ ಸಂಚಾರ ಅಥವಾ ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳನ್ನು ವಿವರವಾಗಿ ವಿಶ್ಲೇಷಿಸಲು ಪ್ರಕಾರ, ಡೊಮೇನ್ ಅಥವಾ ಮಾದರಿಯ ಮೂಲಕ ವಿನಂತಿಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಿ.
HTML ಮತ್ತು CSS ಬದಲಾವಣೆಗಳ ತ್ವರಿತ ಮೂಲಮಾದರಿಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ಮೂಲ ಫೈಲ್ಗಳನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಅವುಗಳನ್ನು ನಿಮ್ಮ ತಂಡದೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಹಂಚಿಕೊಳ್ಳಿ.
Chrome DevTools ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ವಿಶ್ಲೇಷಣೆಯಲ್ಲಿ ಸ್ವಿಸ್ ಸೈನ್ಯದ ಚಾಕುವಾಗಿ ಮಾರ್ಪಟ್ಟಿದೆ, ವೈಯಕ್ತಿಕ ಯೋಜನೆಗಳು ಅಥವಾ ದೊಡ್ಡ ವೇದಿಕೆಗಳು ಮತ್ತು ವೃತ್ತಿಪರ ಯೋಜನೆಗಳಿಗೆ ಸಮಾನವಾಗಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ವಿನ್ಯಾಸದ ವಿವರವನ್ನು ತ್ವರಿತವಾಗಿ ಪರಿಶೀಲಿಸುವುದರಿಂದ ಹಿಡಿದು WPO, SEO ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ಕಾರ್ಯಗಳು ಸೇರಿದಂತೆ ನಿಮ್ಮ ಎಲ್ಲಾ ವೆಬ್ಸೈಟ್ನ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಆಡಿಟ್ ಮಾಡುವವರೆಗೆ, ಲೈಟ್ಹೌಸ್ನಂತಹ ಪರಿಕರಗಳೊಂದಿಗೆ ಅದರ ಏಕೀಕರಣವು Google ಗೆ ಮಾತ್ರವಲ್ಲದೆ ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೂ ನಿಮ್ಮ ಪುಟಗಳನ್ನು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ಅತ್ಯಗತ್ಯ ಸಂಪನ್ಮೂಲವಾಗಿದೆ.
