Giải ngố thuật ngữ Web Dev (Phần 4): Code Editor, Git và Browser DevTools

Chào mừng anh em đã quay trở lại với siucode.com! Ở Phần 3, chúng ta đã cùng nhau đột nhập vào phần lõi Backend, hiểu được cách Server, Database, và API vận hành để một website có thể hoạt động trơn tru. Dù là xây dựng Frontend lung linh hay Backend mạnh mẽ, các lập trình viên đều cần những công cụ hỗ trợ đắc lực.

Chắc hẳn nhiều anh em mới sẽ thắc mắc: “Code web thì dùng gì viết?”, “Lỡ tay xóa mất code thì có cách nào lấy lại không?”, hay “Nhiều người cùng làm một dự án thì quản lý code kiểu gì cho khỏi loạn?”. Những thắc mắc này đều có lời giải đáp với các công cụ chuyên dụng. Trong Phần 4 này, chúng ta sẽ tìm hiểu về một vài đồ nghề cơ bản mà hầu như dev nào cũng phải biết và sử dụng hàng ngày.

Code editor (trình soạn thảo mã): “Ngôi nhà” tiện nghi của coder

Ngày xưa, có thể ai đó code bằng Notepad đơn giản, nhưng thời nay thì không còn ai khổ hạnh vậy nữa đâu anh em. Để viết code hiệu quả, chúng ta cần một Code Editor (Trình soạn thảo mã) chuyên dụng.

• Tại sao không phải Notepad? Code Editor xịn hơn Notepad nhiều lắm! Nó có:
  • Syntax Highlighting (Tô sáng cú pháp): Giúp các từ khóa, biến, chuỗi… trong code có màu sắc khác nhau, dễ đọc, dễ nhìn, đỡ nhầm lẫn.
  • Code Completion/IntelliSense (Gợi ý mã): Gợi ý các lệnh, tên hàm, tên biến khi bạn đang gõ, tiết kiệm thời gian và giảm lỗi sai.
  • Debugging Tools (Công cụ gỡ lỗi): Giúp tìm và sửa lỗi trong code.
  • Extensions/Plugins (Tiện ích mở rộng): Kho tiện ích khổng lồ để tùy biến editor, thêm tính năng mới (ví dụ: tích hợp Git, hỗ trợ ngôn ngữ mới, định dạng code tự động…).
• Lựa chọn phổ biến: Hiện nay, Visual Studio Code (VS Code) của Microsoft là một trong những code editor miễn phí được ưa chuộng nhất và là lựa chọn hàng đầu của rất nhiều dev trên thế giới, nhờ sự nhẹ nhàng, mạnh mẽ và cộng đồng hỗ trợ lớn. Ngoài ra còn có Sublime Text, Atom, WebStorm (có phí)…

Git (hệ thống quản lý phiên bản): “Cỗ máy thời gian” cho code

Đây là một trong những công cụ quan trọng bậc nhất mà mọi lập trình viên nên biết, dù làm việc một mình hay theo nhóm. Git là một Hệ thống Quản lý Phiên Bản Phân tán (Distributed Version Control System – DVCS). Nghe thì phức tạp vậy thôi, chứ nôm na nó giúp bạn:

• Lưu lại lịch sử thay đổi code: Mỗi lần bạn thực hiện những thay đổi quan trọng, bạn có thể ghi lại một phiên bản (gọi là commit).
• Quay lại các phiên bản cũ: Nếu lỡ code lỗi, hoặc muốn xem lại code ở một thời điểm trước đó, Git giúp bạn dễ dàng “du hành thời gian” quay về.
• Làm việc nhóm hiệu quả: Nhiều người có thể cùng làm việc trên một dự án mà không sợ dẫm chân lên code của nhau. Mỗi người có thể làm việc trên một nhánh (branch) riêng, sau đó gộp (merge) lại.
• Thử nghiệm ý tưởng mới mà không sợ hỏng code chính: Tạo nhánh mới để thử nghiệm, nếu ổn thì gộp, không ổn thì bỏ nhánh đó đi.

Khái niệm cốt lõi của Git:

• Repository (Repo – Kho chứa): Là thư mục chứa toàn bộ dự án của bạn cùng với lịch sử thay đổi của Git.
• Commit (Lưu phiên bản): Hành động “chụp ảnh” lại trạng thái hiện tại của dự án và lưu vào lịch sử với một lời nhắn mô tả bạn đã thay đổi những gì.
• Branch (Nhánh): Một dòng thời gian độc lập của code. Nhánh mặc định thường là main hoặc master. Bạn có thể tạo các nhánh mới (ví dụ: feature-login, bugfix-payment) để làm việc trên các tính năng hoặc sửa lỗi riêng biệt mà không ảnh hưởng đến nhánh chính.
• Merge (Gộp nhánh): Khi một nhánh đã hoàn thành (ví dụ: tính năng login đã xong), bạn sẽ gộp những thay đổi từ nhánh đó trở lại vào nhánh chính (ví dụ: main).

Nền tảng lưu trữ Git trực tuyến: Để lưu trữ repo Git của bạn online (backup, chia sẻ, làm việc nhóm), có các nền tảng phổ biến như GitHub, GitLab, Bitbucket. Chúng giống như Google Drive hay Dropbox cho các repo Git của bạn.

Browser DevTools (công cụ nhà phát triển trình duyệt): “Kính lúp” soi lỗi web

Đây là công cụ được tích hợp sẵn trong hầu hết các trình duyệt hiện đại (Chrome, Firefox, Edge…) và là bạn đồng hành không thể thiếu của các Frontend Developer (và cả Backend dev khi cần kiểm tra API). Để mở nó, thường chỉ cần nhấn F12 hoặc chuột phải chọn Inspect (Kiểm tra).

• Công dụng chính:
  • Inspect Elements (Kiểm tra phần tử): Xem và chỉnh sửa trực tiếp mã HTML, CSS của trang web đang hiển thị. Bạn có thể thử thay đổi màu sắc, kích thước, vị trí… và thấy kết quả ngay lập tức (nhưng chỉ là tạm thời trên máy bạn thôi nhé).
  • Console (Bảng điều khiển): Hiển thị các lỗi JavaScript, các thông điệp log do dev ghi ra, hoặc bạn có thể chạy thử các đoạn mã JavaScript tại đây.
  • Network (Mạng): Xem tất cả các yêu cầu (requests) mà trình duyệt gửi đi (ví dụ: tải file ảnh, CSS, JS, gọi API) và các phản hồi (responses) nhận về. Rất hữu ích để kiểm tra API có hoạt động đúng không, dữ liệu trả về là gì.
  • Sources (Nguồn): Xem các file mã nguồn (JS, CSS…) của trang.
  • Application (Ứng dụng): Kiểm tra các loại lưu trữ của trình duyệt như cookies, localStorage, sessionStorage.

Lời kết

Trên đây là ba trong số những công cụ quan trọng nhất mà anh em dev web thường xuyên sử dụng. Một Code Editor tốt giúp bạn code nhanh và chính xác hơn. Git giúp bạn quản lý code chuyên nghiệp, an toàn và làm việc nhóm hiệu quả. Browser DevTools là trợ thủ đắc lực để kiểm tra và gỡ lỗi website.

Nắm vững cách sử dụng các công cụ này sẽ giúp con đường làm dev của bạn bớt gian truân hơn rất nhiều đấy!

Sau khi đã code xong xuôi với đủ đồ chơi xịn, làm thế nào để đưa website của mình lên mạng cho cả thế giới cùng chiêm ngưỡng? Phần tiếp theo sẽ nói về Domain (Tên miền), Hosting (Lưu trữ web) và quá trình Deployment (Triển khai).

Hẹn gặp anh em ở phần tới!

SiuCode – Vừa code vừa siuuuu 🚀