ನೀವು ದಿನವಿಡೀ ಕೋಡ್ ಬರೆಯುತ್ತಿದ್ದರೆ, ನೀವು ಎರಡು ಪರಿಸರಗಳಲ್ಲಿ ಸಮಯ ಕಳೆಯುತ್ತೀರಿ: ನಿಮ್ಮ ಕೆಲಸವು ನಿಜವಾಗಿಯೂ ನಡೆಯುವ ಬ್ರೌಸರ್ ವಿಂಡೋ ಮತ್ತು ಅಲ್ಲಿಯವರೆಗೆ ನೀವು ತೆಗೆದುಕೊಂಡ ಪ್ರತಿಯೊಂದು ನಿರ್ಧಾರವನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುವ Git ರೆಪೊಸಿಟರಿ. ಒಂದು ಸಾರ್ವಜನಿಕ ಮತ್ತು ಅನಿರೀಕ್ಷಿತವಾಗಿದೆ, ಇನ್ನೊಂದು ಖಾಸಗಿ ಮತ್ತು ನಿಖರವಾಗಿದೆ. ಎರಡನ್ನೂ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಕಡ್ಡಾಯವಾಗಿದೆ. ಬ್ರೌಸರ್ನ ಆಂತರಿಕ ಯಂತ್ರೋಪಕರಣಗಳು ಮತ್ತು Git ನ ಸ್ಟೇಜಿಂಗ್ ತರ್ಕದಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯುವುದು, ಕೇವಲ ಊಹಿಸುವ ಡೆವಲಪರ್ಗಳಿಗೂ ಮತ್ತು ಏನೋ ಒಂದು ಏಕೆ ಮುರಿದುಹೋಯಿತು ಮತ್ತು ಯಾವಾಗ ಬದಲಾಯಿತು ಎಂಬುದು ನಿಖರವಾಗಿ ತಿಳಿದಿರುವ ಡೆವಲಪರ್ಗಳಿಗೂ ಇರುವ ವ್ಯತ್ಯಾಸವಾಗಿದೆ.
URL ರಚನೆ
ಪ್ರತಿಯೊಂದು ವೆಬ್ಸೈಟ್ಗೆ ಹೋಗುವ ಪ್ರಯಾಣವು ಸರಳವಾಗಿ ಕಾಣುವ ಆದರೆ ನಿಖರವಾದ ಸೂಚನೆಗಳನ್ನು ಹೊಂದಿರುವ ಅಕ್ಷರಗಳ ಸರಣಿಯೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. https://shop.example.com:443/products/id/42?sort=price#reviews ನಂತಹ URL ವಾಸ್ತವವಾಗಿ ಪ್ರತ್ಯೇಕ ಸೂಚನೆಗಳ ಒಂದು ಗುಂಪಾಗಿದೆ.
protocol ಮುಂಭಾಗದಲ್ಲಿರುತ್ತದೆ ಮತ್ತು ಸಂಭಾಷಣೆಯ ನಿಯಮಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ. ನೀವು https:// ಅನ್ನು ನೋಡಿದಾಗ, ಏನನ್ನೇ ಕಳುಹಿಸುವ ಮೊದಲು ಸಂಪರ್ಕವನ್ನು ಎನ್ಕ್ರಿಪ್ಟ್ ಮಾಡಬೇಕೆಂದು ಬ್ರೌಸರ್ ತಿಳಿಯುತ್ತದೆ. domain (shop.example.com) ಎಂಬುದು ಸರ್ವರ್ನ ನೈಜ ನೆಟ್ವರ್ಕ್ ವಿಳಾಸದ ಮಾನವನಿಗೆ ಓದಬಲ್ಲ ಹೆಸರಾಗಿದೆ. ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್ ಎಲ್ಲಿಗೆ ಸಂಪರ್ಕಿಸಬೇಕು ಎಂದು ತಿಳಿಯಲು ಇದು DNS ಮೂಲಕ ಪರಿಹರಿಸಲ್ಪಡುತ್ತದೆ. port (:443) ಎಂಬುದು ಆ ಸರ್ವರ್ನಲ್ಲಿರುವ ನಿರ್ದಿಷ್ಟ ದ್ವಾರವಾಗಿದೆ. ಬ್ರೌಸರ್ಗಳು HTTPS ಗಾಗಿ 443 ಮತ್ತು HTTP ಗಾಗಿ 80 ಅನ್ನು ಬಳಸುವುದರಿಂದ ಇದು ಹೆಚ್ಚಾಗಿ ಅದೃಶ್ಯವಾಗಿರುತ್ತದೆ, ಆದರೆ ಇದು ಯಾವಾಗಲೂ ಕಾರ್ಯವಿಧಾನದಲ್ಲಿ ಇರುತ್ತದೆ. path (/products/id/42) ಎಂಬುದು ನೀವು ಯಾವ ಸಂಪನ್ಮೂಲವನ್ನು ಬಯಸುತ್ತೀರಿ ಎಂಬುದನ್ನು ಸರ್ವರ್ಗೆ ತಿಳಿಸುತ್ತದೆ, ಇದನ್ನು ಫೋಲ್ಡರ್ಗಳಂತೆ ಸಂಘಟಿಸಲಾಗಿದೆ. query string (?sort=price) ಡೈನಾಮಿಕ್ ಡೇಟಾವನ್ನು ಕೀ-ವ್ಯಾಲ್ಯೂ ಜೋಡಿಗಳಾಗಿ ನೀಡುತ್ತದೆ, ಇದು ಫಿಲ್ಟರ್ಗಳು, ಹುಡುಕಾಟದ ಪದಗಳು ಅಥವಾ ಪೇಜಿನೇಶನ್ಗೆ ಸೂಕ್ತವಾಗಿದೆ. ಕೊನೆಯದಾಗಿ, fragment (#reviews) ಪುಟದಲ್ಲಿರುವ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ ID ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಇದು ಎಂದಿಗೂ ಸರ್ವರ್ಗೆ ತಲುಪುವುದಿಲ್ಲ; ಪುಟವು ಬಂದ ನಂತರ ಬ್ರೌಸರ್ ಇದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೈಂಟ್ ಸೈಡ್ನಲ್ಲಿ ನಿರ್ವಹಿಸುತ್ತದೆ.
ಫ್ರಾಗ್ಮೆಂಟ್ ಅನ್ನು ಕೊನೆಯಲ್ಲಿ ಇರಿಸಿ. ನೀವು ಅದನ್ನು ಕ್ವೇರಿ ಸ್ಟ್ರಿಂಗ್ಗಿಂತ ಮೊದಲು ತಂದರೆ, ಲಿಂಕ್ ಮುರಿದುಹೋಗುತ್ತದೆ ಏಕೆಂದರೆ ಹ್ಯಾಶ್ ನಂತರವಿರುವ ಎಲ್ಲವನ್ನೂ ಸರ್ವರ್ ಸೂಚನೆಗಳಾಗಿ ಅಲ್ಲದೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸಂದರ್ಭವಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
DOM: ನಿಮ್ಮ ಪುಟದ ಜೀವಂತ ನರಮಂಡಲ
ವೈರ್ ಮೂಲಕ ಬರುವ HTML ಕೇವಲ ಪಠ್ಯವಾಗಿದೆ. ಬ್ರೌಸರ್ ಆ ಪಠ್ಯವನ್ನು ಓದುತ್ತದೆ ಮತ್ತು nodes ಎಂದು ಕರೆಯಲ್ಪಡುವ ಆಬ್ಜೆಕ್ಟ್ಗಳ ಜೀವಂತ, ಮರದಂತಹ ನಕ್ಷೆಯಾದ Document Object Model ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. ಎಲಿಮೆಂಟ್ ಟ್ಯಾಗ್ಗಳು ಎಲಿಮೆಂಟ್ ನೋಡ್ಗಳಾಗುತ್ತವೆ. ಟ್ಯಾಗ್ಗಳ ನಡುವಿನ ಪಠ್ಯವು ಟೆಕ್ಸ್ಟ್ ನೋಡ್ಗಳಾಗುತ್ತದೆ. ಅ属性 (attributes) ಮತ್ತು ಕಾಮೆಂಟ್ಗಳಿಗೂ ತಮ್ಮದೇ ಆದ ನೋಡ್ ಪ್ರಕಾರಗಳಿವೆ. ಈ ಮರವು ಸ್ಥಿರವಾದ ರೇಖಾಚಿತ್ರವಲ್ಲ. ಇದು JavaScript ಅನ್ನು ತಕ್ಷಣವೇ ಓದಬಹುದಾದ ಮತ್ತು ಮರುಬರೆಯಬಹುದಾದ ಜೀವಂತ ಡೇಟಾ ರಚನೆಯಾಗಿದೆ.
ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ document.getElementById ಅನ್ನು ರನ್ ಮಾಡಿದಾಗ ಅಥವಾ className ಅನ್ನು ಬದಲಾಯಿಸಿದಾಗ, ನೀವು ಈ ಮರವನ್ನು ತಲುಪಿ ಅದನ್ನು ಬದಲಾಯಿಸುತ್ತಿದ್ದೀರಿ. ಬ್ರೌಸರ್ ಇದನ್ನು ಗಮನಿಸುತ್ತದೆ ಮತ್ತು ಹೊಸ ಪುಟಕ್ಕಾಗಿ ಸರ್ವರ್ ಅನ್ನು ಕೇಳದೆ ಪರದೆಯನ್ನು ಮರು-ಚಿತ್ರಿಸುತ್ತದೆ (repaint). ಆ ಶಕ್ತಿಯೇ ಆಧುನಿಕ ವೆಬ್ ಆಪ್ಗಳನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ, ಆದರೆ ಅದಕ್ಕೆ ಒಂದು ಬೆಲೆ ಇದೆ. ನೀವು ಪ್ರತಿ ಬಾರಿ DOM ಅನ್ನು ಸ್ಪರ್ಶಿಸಿದಾಗಲೂ, ಬ್ರೌಸರ್ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟೈಲ್ಗಳನ್ನು ಮರು-ಲೆಕ್ಕಹಾಕಬಹುದು. ನೂರಾರು ಐಟಂಗಳನ್ನು ಹೊಂದಿರುವ ಕಿರಿದಾದ ಲೂಪ್ನಲ್ಲಿ ಇದನ್ನು ಮಾಡಿದರೆ, ನಿಮ್ಮ ಫ್ರೇಮ್ ರೇಟ್ ಕುಸಿಯುತ್ತದೆ. ನೀವು ಉದ್ದವಾದ ಪಟ್ಟಿಯನ್ನು ಸೇರಿಸಬೇಕಿದ್ದರೆ, ಮೊದಲು ಮೆಮೊರಿಯಲ್ಲಿ DocumentFragment ಅನ್ನು ನಿರ್ಮಿಸಿ, ನಂತರ ಅದನ್ನು ಒಮ್ಮೆ ಸೇರಿಸಿ (append). ನಿಮ್ಮ ರೀಡ್ಸ್ ಮತ್ತು ರೈಟ್ಸ್ಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡಿ. DOM ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವವನ್ನು ಹೊಂದಿದೆ, ಆದರೆ ಅದು ಉಚಿತವಾಗಿ ಸಿಗುವುದಿಲ್ಲ.
ಬ್ರೌಸರ್ ಸ್ಟೋರೇಜ್: ಮೂರು ಉಪಕರಣಗಳು, ಮೂರು ಕೆಲಸಗಳು
ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಬಳಕೆದಾರರ ಯಂತ್ರದಲ್ಲಿ ನೇರವಾಗಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ ಮತ್ತು ಸರಿಯಾದ ವಿಧಾನವನ್ನು ಆರಿಸಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ ಏಕೆಂದರೆ ಪ್ರತಿಯೊಂದನ್ನು ವಿಭಿನ್ನ ಜೀವಿತಾವಧಿ ಮತ್ತು ಸಾಮರ್ಥ್ಯಕ್ಕಾಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.
LocalStorage ಅತ್ಯಂತ ಸರಳವಾಗಿದೆ. ನಿಮ್ಮ ಕೋಡ್ ಅಥವಾ ಬಳಕೆದಾರರು ಅದನ್ನು ಅಳಿಸುವವರೆಗೆ ಇದು ಸಣ್ಣ ಪ್ರಮಾಣದ ಸ್ಟ್ರಿಂಗ್ ಡೇಟಾವನ್ನು ಶಾಶ್ವತವಾಗಿ ಉಳಿಸುತ್ತದೆ. ಡಾರ್ಕ್-ಮೋಡ್ ಆದ್ಯತೆಯು (dark-mode preference) ಇದರ ಒಂದು ಉದಾಹರಣೆ. ಯಾರಾದರೂ ಸ್ವಿಚ್ ಅನ್ನು ಬದಲಾಯಿಸಿದಾಗ, LocalStorage ಗೆ "theme": "dark" ಎಂದು ಬರೆಯಿರಿ. ಮುಂದಿನ ಭೇಟಿಯ ಸಮಯದಲ್ಲಿ, ಅದನ್ನು ಮತ್ತೆ ಓದಿ ಮತ್ತು ಮೊದಲ ಪೇಂಟ್ לפני ಕ್ಲಾಸ್ ಅನ್ನು ಅನ್ವಯಿಸಿ. ಇದು ಸಿಂಕ್ರೋನಸ್ ಆಗಿದೆ ಮತ್ತು ಮೂಲಕ್ಕೆ (origin) ಸೀಮಿತವಾಗಿದೆ, ಇದು ಇದನ್ನು ಸುಲಭವಾಗಿಸುತ್ತದೆ ಆದರೆ ಇದರೊಳಗೆ ಸೂಕ್ಷ್ಮ ಟೋಕನ್ಗಳನ್ನು ಎಂದಿಗೂ ಇರಿಸಬಾರದು ಎಂದೂ ಅರ್ಥೈಸುತ್ತದೆ. ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಚಲಿಸುವ ಯಾವುದೇ ಸ್ಕ್ರಿಪ್ಟ್ ಅದನ್ನು ಓದಬಲ್ಲದು.
SessionStorage ಅದೇ ಕೀ-ವ್ಯಾಲ್ಯೂ API ಅನ್ನು ಬಳಸುತ್ತದೆ, ಆದರೆ ಅದರ ಜೀವಿತಾವಧಿ ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ಗೆ ಸಂಬಂಧಿಸಿದೆ. ಇದು ಪೇಜ್ ರಿಫ್ರೆಶ್ಗಳನ್ನು ತಡೆದುಕೊಳ್ಳುತ್ತದೆ, ಇದು ತಾತ್ಕಾಲಿಕ ಫಾರ್ಮ್ ಪ್ರಗತಿಗೆ (form progress) ಸೂಕ್ತವಾಗಿದೆ. ಬಳಕೆದಾರರು ಉದ್ದವಾದ ಸಮೀಕ್ಷೆಯನ್ನು ತುಂಬುತ್ತಿರುವಾಗ, ಅಕಸ್ಮಾತ್ ರಿಲೋಡ್ ಒತ್ತಿದರೂ, ನೀವು ಅವುಗಳನ್ನು SessionStorage ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿರುವುದರಿಂದ ಅವರ ಉತ್ತರಗಳನ್ನು ಇನ್ನೂ ನೋಡಬಹುದು ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಅವರು ಟ್ಯಾಬ್ ಅನ್ನು ಮುಚ್ಚಿದಾಗ, ಡೇಟಾ ತನ್ನಷ್ಟಕ್ಕೆ ತಾನೇ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಳಿಸಿಹೋಗುತ್ತದೆ.
Cache API ವಿಭಿನ್ನ ಮಟ್ಟದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು request ಮತ್ತು response ಜೋಡಿಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ, ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ service workers ಇಮೇಜ್ಗಳು, ಫಾಂಟ್ಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ ಬಂಡಲ್ಗಳಂತಹ ದೊಡ್ಡ ಸ್ಟ್ಯಾಟಿಕ್ ಅಸೆಟ್ಗಳನ್ನು (static assets) ಹಿಡಿದಿಡಲು ಬಳಸುತ್ತವೆ. ಪ್ರತಿ ಭೇಟಿಯಲ್ಲೂ ಒಂದೇ hero image ಅಥವಾ React bundle ಅನ್ನು ನೆಟ್ವರ್ಕ್ ಮೂಲಕ ಪಡೆಯುವ ಬದಲು, ನಿಮ್ಮ ಆ್ಯಪ್ ಅದನ್ನು ನೇರವಾಗಿ disk cache ನಿಂದ ನೀಡಬಹುದು. ಹೀಗೆಯೇ ಆಫ್ಲೈನ್ ಸಾಮರ್ಥ್ಯವಿರುವ ಸೈಟ್ಗಳು ಪುನರಾವರ್ತಿತ ಭೇಟಿಗಳಲ್ಲಿ ತಕ್ಷಣವೇ ಲೋಡ್ ಆಗುತ್ತವೆ. ಇದು ಇತರ ಎರಡು ಸಾಧನಗಳಂತೆ ಸಾಮಾನ್ಯ key-value store ಅಲ್ಲ; ಇದು HTTP responses ಗಾಗಿ ವಿಶೇಷವಾಗಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.
ಒಂದು ಕಟ್ಟುನಿಟ್ಟಾದ ನಿಯಮ: LocalStorage ನಲ್ಲಿ ಎಂದಿಗೂ authentication tokens ಅಥವಾ ವೈಯಕ್ತಿಕ ಗುರುತಿಸುವಿಕೆಗಳನ್ನು (personal identifiers) ಸಂಗ್ರಹಿಸಬೇಡಿ. XSS ದಾಳಿಗಳು ಅವುಗಳನ್ನು ಮಿಲಿಸೆಕೆಂಡ್ಗಳಲ್ಲಿ ಕಬಳಿಸಬಹುದು. ಯಾವುದೇ ಸೂಕ್ಷ್ಮ ಮಾಹಿತಿಗಾಗಿ HttpOnly, Secure, SameSite ಕುಕೀಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ಅವುಗಳನ್ನು Application tab ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ, ಅಲ್ಲಿ ನೀವು ಫ್ಲಾಗ್ಗಳನ್ನು (flags) ಸರಿಯಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಬಹುದು.
Browser DevTools: ಊಹಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ, ಓದುವುದನ್ನು ಪ್ರಾರಂಭಿಸಿ
DevTools ಪ್ಯಾನೆಲ್ ಕೇವಲ ಕೆಂಪು ಬಣ್ಣದ console ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸಲು ಮಾತ್ರವಲ್ಲ. ಇದು ಬ್ರೌಸರ್ನ ಒಳಗೆ ನಡೆಯುವ ಪ್ರತಿಯೊಂದಕ್ಕೂ ನಿಮ್ಮ ಡಯಾಗ್ನೋಸ್ಟಿಕ್ ಲ್ಯಾಬ್ ಆಗಿದೆ.
Elements ಪ್ಯಾನೆಲ್ನಲ್ಲಿ, ನೀವು DOM tree ಮೇಲೆ ಮೌಸ್ ಇರಿಸಿದಾಗ (hover), ಪೇಜ್ನಲ್ಲಿ ನೋಡ್ಗಳು (nodes) ನೈಜ ಸಮಯದಲ್ಲಿ ಹೈಲೈಟ್ ಆಗುವುದನ್ನು ನೋಡಬಹುದು. ನಿಮ್ಮ ಸೋರ್ಸ್ ಕೋಡ್ ಅನ್ನು ಮುಟ್ಟುವ ಮೊದಲೇ ಮಾರ್ಜಿನ್ ಅಥವಾ ಬಣ್ಣವನ್ನು ಪರೀಕ್ಷಿಸಲು ನೀವು Styles ಪೇನ್ನಲ್ಲಿ ನೇರವಾಗಿ CSS ಮೌಲ್ಯಗಳನ್ನು ಎಡಿಟ್ ಮಾಡಬಹುದು. Console ನಿಮ್ಮ ಸ್ಕ್ರ್ಯಾಚ್ಪ್ಯಾಡ್ ಆಗಿದೆ. ಆಬ್ಜೆಕ್ಟ್ಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ, regex ಪರೀಕ್ಷಿಸಿ ಅಥವಾ ಪ್ರಸ್ತುತ ಪೇಜ್ ಸ್ಟೇಟ್ಗೆ ಲೈವ್ ಆಗಿ ಫಂಕ್ಷನ್ಗಳನ್ನು ಕರೆಯಿರಿ. ಒಂದು ವೇರಿಯೇಬಲ್ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡದಿದ್ದರೆ, ಅದರ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ ಮತ್ತು ನೇರವಾಗಿ ಪರೀಕ್ಷಿಸಿ.
Network ಟ್ಯಾಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯ (performance) ಬಗ್ಗೆ ಸತ್ಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಆ ನಿಧಾನಗತಿಯ ಪೇಜ್ ನಿಮ್ಮ JavaScript ಇರಲಿಕ್ಕಿಲ್ಲ. ಅದು ಪ್ರತಿಕ್ರಿಯಿಸಲು ನಾಲ್ಕು ಸೆಕೆಂಡುಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಥರ್ಡ್-ಪಾರ್ಟಿ ಫಾಂಟ್ ಆಗಿರಬಹುದು, ಅಥವಾ ನೀವು ಕಾಂಪ್ರೆಸ್ ಮಾಡದ ಎರಡು ಮೆಗಾಬೈಟ್ JSON ಪೇಲೋಡ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುವ API ಎಂಡ್ಪಾಯಿಂಟ್ ಆಗಿರಬಹುದು. ನೀವು ಪ್ರತಿಯೊಂದು ರಿಕ್ವೆಸ್ಟ್ನ ಸಂಪೂರ್ಣ ಜೀವನಚಕ್ರವನ್ನು ಪತ್ತೆಹಚ್ಚಬಹುದು, Fetch/XHR ಮೂಲಕ ಫಿಲ್ಟರ್ ಮಾಡಿ ನಿಮ್ಮ ಸ್ವಂತ API ಕರೆಗಳನ್ನು ವೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಕ್ಯಾಶಿಂಗ್ ನಿರ್ದೇಶನಗಳನ್ನು (caching directives) ಪಾಲಿಸಲಾಗುತ್ತಿದೆಯೇ ಎಂದು ನೋಡಲು ಹೆಡರ್ಸ್ಗಳನ್ನು ಪರೀಕ್ಷಿಸಬಹುದು. ಈ ಮಧ್ಯೆ, Application ಟ್ಯಾಬ್ ನಿಮ್ಮ ಸ್ಟೋರೇಜ್ ಅನ್ನು ಆಡಿಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. LocalStorage key-value ಜೋಡಿಗಳ ಒಳಗೆ ನೋಡಿ, ವೈಯಕ್ತಿಕ ಕುಕೀಗಳು ಮತ್ತು ಅವುಗಳ ಫ್ಲಾಗ್ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ನಿಮ್ಮ service worker ನಿರೀಕ್ಷಿತ ರೀತಿಯಲ್ಲಿ ನೋಂದಾಯಿಸಲ್ಪಟ್ಟಿದೆಯೇ ಮತ್ತು ಕ್ಯಾಶ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
Git Workflow: ಮೂರು ಬಕೆಟ್ಗಳು
Git ಎಂಬುದು ಬ್ಯಾಕಪ್ ಸಾಫ್ಟ್ವೇರ್ ಅಲ್ಲ. ಇದು ಇತಿಹಾಸವನ್ನು ಸಂಘಟಿಸುವ (curating) ಸಾಧನವಾಗಿದೆ. ಆ ರೀತಿ ಯೋಚಿಸುವುದು ನೀವು ಅದನ್ನು ಬಳಸುವ ರೀತಿಯನ್ನೇ ಬದಲಾಯಿಸುತ್ತದೆ. Git ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಮೂರು ವಿಭಿನ್ನ ಪ್ರದೇಶಗಳ ಮೂಲಕ ನಿರ್ವಹಿಸುತ್ತದೆ.
working tree ನಿಮ್ಮ ಅಸ್ತವ್ಯಸ್ತವಾದ ಮೇಜು ಇದ್ದಂತೆ. ನೀವು ಇಲ್ಲಿ ಫೈಲ್ಗಳನ್ನು ಎಡಿಟ್ ಮಾಡಬಹುದು, ಫೋಲ್ಡರ್ಗಳನ್ನು ಡಿಲೀಟ್ ಮಾಡಬಹುದು ಮತ್ತು ಪ್ರಯೋಗ ಮಾಡಬಹುದು. ಇಲ್ಲಿ ಇನ್ನೂ ಯಾವುದೂ ಸುರಕ್ಷಿತವಾಗಿಲ್ಲ. staging area, ಅಥವಾ index, ನೀವು ಮುಂದಿನ ಸ್ನ್ಯಾಪ್ಶಾಟ್ಗೆ (snapshot) ಏನನ್ನು ಸೇರಿಸಬೇಕು ಎಂಬುದನ್ನು ಆಯ್ದುಕೊಳ್ಳುವ ಸ್ಥಳವಾಗಿದೆ. ಒಂದು ಫೈಲ್ ಮೇಲೆ git add ಚಲಾಯಿಸುವುದು ಅದನ್ನು working tree ನಿಂದ staging ಗೆ ವರ್ಗಾಯಿಸುತ್ತದೆ. ಇದು ನಿಮಗೆ ನಿಖರತೆಯನ್ನು ನೀಡುತ್ತದೆ. ನೀವು ಹತ್ತು ಫೈಲ್ಗಳನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು, ಅವುಗಳಲ್ಲಿ ಕೇವಲ ಮೂರನ್ನು ಮಾತ್ರ ಸ್ಟೇಜ್ ಮಾಡಬಹುದು ಮತ್ತು ಒಂದು ಬದಲಾವಣೆಯನ್ನು ಮಾತ್ರ ವಿವರಿಸುವ ಸ್ವಚ್ಛವಾದ, ತಾರ್ಕಿಕ ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಅನ್ನು ಕಮಿಟ್ ಮಾಡಬಹುದು. ನೀವು git commit ಚಲಾಯಿಸಿದಾಗ local repository ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಆ ಸಮಯದಲ್ಲಿ, Git ನಿಮ್ಮ ಸಂದೇಶದೊಂದಿಗೆ ಸ್ಟೇಜ್ ಮಾಡಲಾದ ಫೈಲ್ಗಳ ಸಂಪೂರ್ಣ ಸ್ಥಿತಿಯನ್ನು ದಾಖಲಿಸುತ್ತದೆ, ಇದು ನೀವು ನಂತರ ಮರಳಬಹುದಾದ ಶಾಶ್ವತ ಚೆಕ್ಪಾಯಿಂಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
ನೀವು ಏನನ್ನಾದರೂ ಸ್ಟೇಜ್ ಮಾಡುವ ಮೊದಲು, git status ಚಲಾಯಿಸಿ. ಇದು ನೀವು ಮರೆತಿರಬಹುದಾದ untracked ಫೈಲ್ಗಳು ಮತ್ತು ಮಾರ್ಪಡಿಸಿದ ಫೈಲ್ಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಈ ಪರಿಶೀಲನೆಯನ್ನು ನೀವು ಬಿಟ್ಟರೆ, ತಾತ್ಕಾಲಿಕ ಬಿಲ್ಡ್ ಆರ್ಟಿಫ್ಯಾಕ್ಟ್ಗಳು (build artifacts), ಲಾಗ್ ಫೈಲ್ಗಳು ಅಥವಾ ಎನ್ವಿರಾನ್ಮೆಂಟ್ ಫೈಲ್ಗಳು ಕಮಿಟ್ಗಳಿಗೆ ಸೋರಿಕೆಯಾಗಬಹುದು. ಒಂದು ಉತ್ತಮ .gitignore ಫೈಲ್ ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಆದರೆ git status ನಿಮ್ಮ ಅಂತಿಮ ಪ್ರಿ-ಫ್ಲೈಟ್ ತಪಾಸಣೆಯಾಗಿದೆ.
ಸ್ಟೇಜಿಂಗ್ ಮಾಡುವುದು ತಪ್ಪುಗಳು ಇತಿಹಾಸವಾಗುವ ಮೊದಲೇ ಅವುಗಳನ್ನು ಸರಿಪಡಿಸಲು ಸಹ ಮಾಡುತ್ತದೆ. ನೀವು ಫೈಲ್ ಅನ್ನು ಅಕಾಲಿಕವಾಗಿ ಸೇರಿಸಿದ್ದರೆ git restore --staged ಬಳಸಿ ಅದನ್ನು ಅನ್ಸ್ಟೇಜ್ ಮಾಡಿ. ನಿಮ್ಮ ಕಮಿಟ್ ಸಂದೇಶವು ಅಸ್ಪಷ್ಟವಾಗಿದ್ದರೆ ಅದನ್ನು ಮರುಬರೆಯಿರಿ. ನಿಮ್ಮ ಕಮಿಟ್ಗಳು ಕೇವಲ ನೀವು ಮಾಡಿದ ಪ್ರತಿಯೊಂದು ಕೀಸ್ಟ್ರೋಕ್ನ ರ ಕರಕಚಂದವಾಗಿರದೆ, ಒಂದು ಸುಸಂಬದ್ಧ ಕಥೆಯನ್ನು ಹೇಳಲಿ ಎಂಬ ಕಾರಣಕ್ಕಾಗಿಯೇ staging area ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ.
ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ತರುವುದು
ಈ ಎರಡು ಕ್ಷೇತ್ರಗಳು, ಬ್ರೌಸರ್ ಮತ್ತು Git, ನಿಮ್ಮ ಕೆಲಸದ ಪ್ರತಿಯೊಂದು ಗಂಟೆಯನ್ನೂ ರೂಪಿಸುತ್ತವೆ. ಬ್ರೌಸರ್ನಲ್ಲಿ, ರಿಕ್ವೆಸ್ಟ್ಗಳು ಹೇಗೆ ಪರಿಹರಿಸಲ್ಪಡುತ್ತವೆ, DOM ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ಗಳಿಗೆ ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಮತ್ತು ಕ್ಲೈಂಟ್ನಲ್ಲಿ ಡೇಟಾ ಎಲ್ಲಿ ಇರುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ರಹಸ್ಯಗಳಿಗಾಗಿ LocalStorage ಅನ್ನು ದುರುಪಯೋಗಪಡಿಸಿಕೊಳ್ಳುವುದು ಅಥವಾ ಅನ್ಬ್ಯಾಚ್ಡ್ (unbatched) ಅಪ್ಡೇಟ್ಗಳೊಂದಿಗೆ DOM ಅನ್ನು ಒತ್ತಡಕ್ಕೆ ತರುವುದು ದುರ್ಬಲ ಮತ್ತು ನಿಧಾನಗತಿಯ ಆ್ಯಪ್ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ನಿಮ್ಮ ಟರ್ಮಿನಲ್ನಲ್ಲಿ, Git ಅನ್ನು ಕೇವಲ 'save' ಬಟನ್ನಂತೆ ಪರಿಗಣಿಸುವುದು ನಿಮ್ಮ ಭವಿಷ್ಯದ ಸ್ವತಃ ನಿಮಗೆ ಸಹ ಓದಲು ಸಾಧ್ಯವಾಗದ ಇತಿಹಾಸವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಸ್ಟೇಜಿಂಗ್ ಏರಿಯಾವನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಬಳಸಿ. ನಿಮ್ಮ ಸ್ಟೇಟಸ್ ಪರಿಶೀಲಿಸಿ. ಕೇವಲ 'ಏನು' ಬದಲಾಯಿತು ಎಂದು ಮಾತ್ರವಲ್ಲದೆ, 'ಏಕೆ' ಬದಲಾಯಿತು ಎಂದು ವಿವರಿಸುವ ಕಮಿಟ್ಗಳನ್ನು ಬರೆಯಿರಿ.
ಎರಡೂ ಜಗತ್ತುಗಳನ್ನು ಬೆಸೆಯುವ ಅಭ್ಯಾಸವೆಂದರೆ ಪರೀಕ್ಷಿಸುವುದು (inspection). API ಅನ್ನು ದೂಷಿಸುವ ಮೊದಲು URL ಗಳನ್ನು ತನಿಖೆ ಮಾಡಿ. ಫ್ರೇಮ್ವರ್ಕ್ ಅನ್ನು ಸೇರಿಸುವ ಮೊದಲು DOM ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಿ. ದೊಡ್ಡ ಸರ್ವರ್ ಅನ್ನು ಖರೀದಿಸುವ ಮೊದಲು Network ಟ್ಯಾಬ್ ಅನ್ನು ಓದಿ. ತಪ್ಪು ಮಾಡಿದ್ದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೊದಲು git status ಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಪರಿಕರಗಳು ಈಗಾಗಲೇ ನಿಮ್ಮ ಪರದೆಯ ಮೇಲೆ ತೆರೆದಿವೆ. ಅವುಗಳನ್ನು ಪ್ರಾಮಾಣಿಕವಾಗಿ ಓದಲು ಕಲಿಯುವುದೇ ನಿಮ್ಮ ಕೆಲಸ.