ವೆಬ್ ಪೇಜ್ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಹೇಗೆ

ಯಾವುದೇ ವೆಬ್ ಪುಟದ HTML ಮತ್ತು CSS ಅನ್ನು ನೋಡಿ

ವೆಬ್ಸೈಟ್ ಕೋಡ್ಗಳ ಸಾಲುಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿರುತ್ತದೆ, ಆದರೆ ಫಲಿತಾಂಶಗಳು ಚಿತ್ರಗಳು, ವೀಡಿಯೋ, ಫಾಂಟ್ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟ ಪುಟಗಳಾಗಿವೆ. ಆ ಅಂಶಗಳಲ್ಲಿ ಒಂದನ್ನು ಬದಲಾಯಿಸಲು ಅಥವಾ ಅದನ್ನು ಒಳಗೊಂಡಿರುವುದನ್ನು ನೋಡಿ, ಅದನ್ನು ನಿಯಂತ್ರಿಸುವ ನಿರ್ದಿಷ್ಟವಾದ ಕೋಡ್ ಅನ್ನು ನೀವು ಕಂಡುಹಿಡಿಯಬೇಕು. ನೀವು ಅಂಶ ತಪಾಸಣಾ ಪರಿಕರದಿಂದ ಅದನ್ನು ಮಾಡಬಹುದು.

ಹೆಚ್ಚಿನ ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ನೀವು ತಪಾಸಣಾ ಉಪಕರಣವನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಲು ಅಥವಾ ಆಡ್-ಆನ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಅವರು ಪುಟ ಅಂಶವನ್ನು ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಅಂಶಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಅಥವಾ ಪರಿಶೀಲಿಸಲು ಆಯ್ಕೆ ಮಾಡುತ್ತಾರೆ. ಆದಾಗ್ಯೂ, ಪ್ರಕ್ರಿಯೆಯು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿರುತ್ತದೆ.

Chrome ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ

Google Chrome ನ ತೀರಾ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಗಳು ಈ ಪುಟವನ್ನು ಕೆಲವು ರೀತಿಗಳಲ್ಲಿ ಪರಿಶೀಲಿಸಲು ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ, ಇವೆಲ್ಲವೂ ಅದರ ಅಂತರ್ನಿರ್ಮಿತ Chrome DevTools ಅನ್ನು ಬಳಸುತ್ತವೆ:

• ಪುಟದಲ್ಲಿ ಏನನ್ನಾದರೂ ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ (ಅಥವಾ ಖಾಲಿ ಪ್ರದೇಶ) ಮತ್ತು ಪರೀಕ್ಷಿಸಿ ಆಯ್ಕೆಮಾಡಿ
• Ctrl + Shift + I ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್ಕಟ್ ಅನ್ನು ನಮೂದಿಸಿ
• ಇನ್ನಷ್ಟು ಪರಿಕರಗಳು> ಡೆವಲಪರ್ ಟೂಲ್ಗಳ ಆಯ್ಕೆಯನ್ನು ಪ್ರವೇಶಿಸಲು Chrome ಮೆನುವನ್ನು ಬಳಸಿ

ಎಚ್ಟಿಎಮ್ಎಲ್ ಸಾಲುಗಳನ್ನು ಸುಲಭವಾಗಿ ನಕಲಿಸಲು ಅಥವಾ ಸಂಪಾದಿಸಲು ಅಥವಾ ಒಟ್ಟಾರೆಯಾಗಿ ಅಂಶಗಳನ್ನು ಮರೆಮಾಡಲು ಅಥವಾ ಅಳಿಸಲು (ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡುವವರೆಗೆ) ಹಾಗೆ ಮಾಡಲು Chrome DevTools ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಒಮ್ಮೆ DevTools ಪುಟದ ಬದಿಯಲ್ಲಿ ತೆರೆಯುತ್ತದೆ, ನೀವು ಸ್ಥಾನದಲ್ಲಿದೆ ಅಲ್ಲಿ ಅದನ್ನು ಬದಲಾಯಿಸಬಹುದು, ಪುಟದ ಹೊರಗೆ ಪಾಪ್ ಮಾಡಿ, ಎಲ್ಲಾ ಪುಟದ ಫೈಲ್ಗಳನ್ನು ಹುಡುಕಿ, ನಿರ್ದಿಷ್ಟ ಪರೀಕ್ಷೆಗಾಗಿ ಪುಟದಿಂದ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ, ಫೈಲ್ಗಳನ್ನು ನಕಲಿಸಿ ಮತ್ತು URL ಗಳನ್ನು ನಕಲಿಸಿ ಮತ್ತು ಒಂದು ಗುಂಪನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ ಸೆಟ್ಟಿಂಗ್ಗಳ.

ಫೈರ್ಫಾಕ್ಸ್ನಲ್ಲಿ ಎಲಿಮೆಂಟ್ಸ್ ಪರೀಕ್ಷಿಸಿ

Chrome ನಂತೆ, ಫೈರ್ಫಾಕ್ಸ್ ಇನ್ಸ್ಪೆಕ್ಟರ್ ಎಂಬ ಉಪಕರಣವನ್ನು ತೆರೆಯಲು ಕೆಲವು ವಿಭಿನ್ನ ಮಾರ್ಗಗಳನ್ನು ಹೊಂದಿದೆ:

• ಪುಟದಲ್ಲಿ ಖಾಲಿ ಪ್ರದೇಶವನ್ನು ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಅಥವಾ ಒಂದು ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ, ಮತ್ತು ಎಲಿಮೆಂಟ್ ಪರೀಕ್ಷಿಸಿ ಆಯ್ಕೆಮಾಡಿ
• ಕೀಬೋರ್ಡ್ನೊಂದಿಗೆ Ctrl + Shift + T ಅಥವಾ Ctrl + Shift + I ಅನ್ನು ನಮೂದಿಸಿ
• ಫೈರ್ಫಾಕ್ಸ್ ಮೆನುವಿನಿಂದ, ಡೆವಲಪರ್ > ಇನ್ಸ್ಪೆಕ್ಟರ್ ಕ್ಲಿಕ್ ಮಾಡಿ
• ಪರಿಕರಗಳ ಮೆನುವಿನಿಂದ, ವೆಬ್ ಡೆವಲಪರ್> ಇನ್ಸ್ಪೆಕ್ಟರ್ ಕ್ಲಿಕ್ ಮಾಡಿ

ಫೈರ್ಫಾಕ್ಸ್ನಲ್ಲಿನ ವಿವಿಧ ಅಂಶಗಳ ಮೇಲೆ ನಿಮ್ಮ ಮೌಸ್ ಅನ್ನು ನೀವು ಚಲಿಸುವಾಗ, ಇನ್ಸ್ಪೆಕ್ಟರ್ ಉಪಕರಣವು ಅಂಶದ ಮೂಲ ಕೋಡ್ ಮಾಹಿತಿಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಂಡುಕೊಳ್ಳುತ್ತದೆ. ಒಂದು ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು "ಆನ್-ದಿ-ಫ್ಲೈ ಸರ್ಚ್" ನಿಷ್ಕ್ರಿಯಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಇನ್ಸ್ಪೆಕ್ಟರ್ ವಿಂಡೋದ ಅಂಶವನ್ನು ನೀವು ಪರಿಶೀಲಿಸಬಹುದು.

ಎಲ್ಲಾ ಬೆಂಬಲಿತ ನಿಯಂತ್ರಣಗಳನ್ನು ಕಂಡುಹಿಡಿಯಲು ಒಂದು ಅಂಶವನ್ನು ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ. ಪುಟವನ್ನು HTML, ನಕಲಿಸಿ ಅಥವಾ ಒಳ ಅಥವಾ ಹೊರ HTML ಕೋಡ್ ಅಂಟಿಸಿ, DOM ಗುಣಲಕ್ಷಣಗಳನ್ನು ತೋರಿಸು, ಸ್ಕ್ರೀನ್ಶಾಟ್ ಅಥವಾ ನೋಡ್ ಅನ್ನು ಅಳಿಸಿ, ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸುಲಭವಾಗಿ ಅನ್ವಯಿಸಬಹುದು, ಪುಟದ ಎಲ್ಲಾ CSS ಅನ್ನು ನೋಡಿ, ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ನೀವು ಸಂಪಾದಿಸಬಹುದು.

ಒಪೆರಾದಲ್ಲಿ ಎಲಿಮೆಂಟ್ಸ್ ಪರೀಕ್ಷಿಸಿ

ಒಪೇರಾ ಕೂಡ ಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅದರೊಂದಿಗಿರುವ DOM ಇನ್ಸ್ಪೆಕ್ಟರ್ ಉಪಕರಣವು ಕ್ರೋಮ್ನಂತೆಯೇ ಇರುತ್ತದೆ. ಇದಕ್ಕೆ ಹೇಗೆ ಹೋಗುವುದು ಇಲ್ಲಿವೆ:

• ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್ಕಟ್ Ctrl + Shift + I ಬಳಸಿ
• ಮೆನು> ಇನ್ನಷ್ಟು ಪರಿಕರಗಳು> ಡೆವಲಪರ್ ಮೆನುವನ್ನು ತೋರಿಸು ಮತ್ತು ಮೆನು> ಡೆವಲಪರ್> ಡೆವಲಪರ್ ಪರಿಕರಗಳ ಮೂಲಕ ಮೆನುವನ್ನು ತೆರೆಯಿರಿ
• ಪುಟದಲ್ಲಿನ ಯಾವುದೇ ಅಂಶದ ಬಲ ಕ್ಲಿಕ್ ಮೆನುವಿನಿಂದ, ಅಂಶವನ್ನು ಪರೀಕ್ಷಿಸಿ ಆಯ್ಕೆಮಾಡಿ

ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನಲ್ಲಿ ಎಲಿಮೆಂಟ್ಸ್ ಪರೀಕ್ಷಿಸಿ

ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಎಂದು ಕರೆಯಲ್ಪಡುವ ಎಲಿಮೆಂಟ್ ಟೂಲ್ ಅನ್ನು ಹೋಲುವಂತೆಯೇ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನಲ್ಲಿ ಲಭ್ಯವಿದೆ:

• ಕೀಬೋರ್ಡ್ ಮೇಲೆ F12 ಅನ್ನು ಒತ್ತಿರಿ
• ಪರಿಕರಗಳು> F12 ಡೆವಲಪರ್ ಮೆನು ಆಯ್ಕೆಯನ್ನು ಬಳಸಿ (ನೀವು ಪರಿಕರಗಳ ಮೆನುವನ್ನು ನೋಡದಿದ್ದರೆ Alt + X ಅನ್ನು ಒತ್ತಿರಿ )
• ಪುಟದ ಮೇಲೆ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಎಲಿಮೆಂಟ್ ಪರೀಕ್ಷಿಸಿ ಕ್ಲಿಕ್ ಮಾಡಿ

ಐಇ ಈ ಹೊಸ ಮೆನುವಿನಲ್ಲಿ ಆಯ್ದ ಎಲಿಮೆಂಟ್ ಟೂಲ್ ಅನ್ನು ಹೊಂದಿದೆ ಅದು ಅದು ಅದರ HTML ಮತ್ತು CSS ವಿವರಗಳನ್ನು ನೋಡಲು ಯಾವುದೇ ಪುಟ ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ನೀವು DOM ಎಕ್ಸ್ಪ್ಲೋರರ್ ಟ್ಯಾಬ್ ಮೂಲಕ ಬ್ರೌಸ್ ಮಾಡುತ್ತಿರುವಾಗ ನೀವು ಎಲಿಮೆಂಟ್ ಹೈಲೈಟ್ ಮಾಡುವಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು / ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು.

ಮೇಲಿನ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಇತರ ಎಲಿಮೆಂಟ್ ಇನ್ಸ್ಪೆಕ್ಟರ್ ಪರಿಕರಗಳಂತೆಯೇ, ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ ನಿಮಗೆ ಅಂಶಗಳನ್ನು ಕತ್ತರಿಸಿ, ನಕಲಿಸಲು ಮತ್ತು ಅಂಟಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಅಲ್ಲದೇ ಎಚ್ಟಿಎಮ್ಎಲ್ ಅನ್ನು ಸಂಪಾದಿಸಿ, ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಿ, ಲಗತ್ತಿಸಲಾದ ಶೈಲಿಗಳೊಂದಿಗೆ ಲಗತ್ತಿಸುವ ಅಂಶಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ.