Web development tools là gì? Trong lập trình, việc code lỗi là chẳng thể tránh khỏi khỏi. Nhưng trên trình duyệt, bạn thường sẽ không nhìn thấy những lỗi này. Mà thay vào đó, bạn phải cần coi thông qua một công cụ. Đó chủ đạo là Dev Tools. Qua bài viết dưới đây, Taiungdung.vn sẽ cung cấp thêm nhiều thông tin hơn đến các bạn đọc, cùng theo dõi nhé!
Nội dung bài viết
Web development tools là gì?
Dev Tools (developer tools) là công cụ được tích hợp sẵn trong trình duyệt web, giúp các lập trình viên có thể dễ dàng truy cập vào nội bộ của trình duyệt web và áp dụng trang web của họ.
Dev Tools có nhiều chức năng. Tuy nhiên trong phạm vi bài đăng này, mình sẽ tìm hiểu cơ bản về bí quyết mở Dev Tools, cách coi lỗi, và bí quyết để chạy code JavaScript trên đó.
Bên cạnh đó, vì dev tools trên các trình duyệt cũng gần giống nhau có thể mình sẽ tập trung vào một loại trình duyệt phổ biến, hỗ trợ đa nền tảng (Windows, macOS và Linux). Đó là “Google Chrome Developer Tools” hay gọi tắt là “Chrome Dev Tools”.
Xem thêm Tại sao Facebook chặn các trang web? Nguyên nhân và cách khắc phục
Tìm hiểu một vài tools bên trong Google Chrome Developer Tools
Khi mà bạn làm việc với công cụ Developer Tools Chủ yếu bạn check lỗi (nếu có) của code web và tìm cách sửa nó với JavaScript. Vậy có thể bạn hứa hẹn sẽ thực hiện công việc với một số tools tiêu biểu trong Dev Tools như sau:
* Lưu ý: Bạn hãy nhấn tổ hợp Ctrl+[ hoặc Ctrl + ] để di chuyển qua lại giữa 8 tools tiêu biểu trong Dev Tools một bí quyết đơn giản.
Elements và Style
Tab Elements sẽ xuất hiện mã HTML và CSS của trang website bạn đang kiểm duyệt. Bạn có khả năng trực tiếp chỉnh CSS ở cửa sổ này và có thể nhìn thấy ngay hậu quả. Dễ dàng hơn trước kia nhiều lần, bạn chẳng cần mở CSS ra – thay đổi – lưu – F5 lại trang website.
Tab Style cho phép kiểm duyệt mã màu, font chữ, màu nền một cách chuẩn xác. Nói chung, với Tools Style có thể giúp bạn check Design concept của trang website một cách gọn lẹ, chuẩn xác.
Networks
Với tab Networks bạn sẽ coi được đa phần những thứ đặc biệt trong code website như html, css, javascript, hình ảnh, thời gian load trang,… mục tiêu kiểm duyệt ở tools Networks nhằm phát hiện thấy những bug gặp hư hại, code không chạy và đúng lúc sửa lại.
Sources
Khi nhà phát triển web muốn debug cho trang của họ, họ cần sử dụng đến tab Sources để check lỗi nhanh hơn.
Timeline & Profile
Mặc dù ít khi cần sử dụng đến tuy nhiên Timeline & Profile là một tab quan trọng trong Developer Tools. Chúng được tạo ra nhằm mục đích tìm ra điều gì làm cho JavaScript chạy quá chậm và tìm cách thích hợp.
Resources
Web development tools là gì? Khi bạn mong muốn tìm kiếm và check dữ liệu trên Cookies, WebSQL hay LocalStorage, bạn cần dùng đến tab Resources.
Ví dụ dùng Chrome Dev Tools
Đầu tiên, bạn hãy mở trang demo này: bug.html.
Trong trang này, mình đã cố tình tạo ra một lỗi. Nhưng rõ ràng là bạn vẫn nhìn thấy trang web hiển thị thông thường phải không?
Để xem lỗi chi tiết, bạn cần mở Chrome Dev Tools lên bằng cách nhấn phím F12 hoặc tổ hợp phím Ctrl Shift I trên Windows (Ctrl Opt J trên macOS).
Chrome Dev Tools sẽ mở tab “Console” đầu tiên (hoặc nếu không thì bạn chủ động nhấn vào tab đó). Hậu quả sẽ như sau:
Bố cụ và giao diện chính xác có thể khác nhau đôi chút tùy vào phiên bản trình duyệt Chrome. Tuy nhiên thường thì thông tin sẽ bao gồm:
- Dòng màu đỏ: Thông báo lỗi (“Uncaught ReferenceError: bug is not defined”).
- Bên phải và/hoặc ở dưới: hiển thị vị trí lỗi, chuẩn xác với số dòng (“bug:11” – ở đây là dòng 11). Bạn có khả năng bấm vào đấy. Chrome Dev Tools sẽ xuất hiện chuẩn xác dòng gặp hư hại trong mã nguồn.
Xem thêm Cách tăng tốc độ duyệt web tăng trải nghiệm người dùng
Bạn sẽ dùng Developer Tools để làm gì?
Web development tools là gì? Không phải là web Developer cũng chẳng ảnh hưởng gì mấy đến việc bạn dùng Developer Tools một cách thú vị nhất. Và dưới đây sẽ là những thứ mà bạn thực hiện được với công cụ này:
- Đầu tiên thì hầu hết con người sẽ dùng đến tab Element nhằm kiểm tra các thẻ h1 trên html, thay đổi css làm cho giao diện web đẹp hơn. Bạn cũng dùng tab Element để check coi trang website được xây dựng bằng cái gì.
- Nếu như bạn muốn thiết kế website bằng việc copy-paste thì bạn sẽ thấy Developer Tools có ích đến nhường nào. Bạn chỉ cần mở Dev Tools ra và dán mã code mà bạn đã copy vào đấy là được.
- Sử dụng Developer Tools để check khung nhìn cho bố cụ và giao diện web. Đây là chức năng cho phép bạn chuyển đổi khung nhìn trang web phù hợp với các thiết bị không giống nhau.
Qua bài viết trên đây Taiungdung.vn đã cung cấp mọi thông tin mà bạn cần biết về Web development tools là gì? Bạn dùng Developer Tools để làm gì?. Hy vọng với những thông tin trên của bài viết bạn sẽ tìm được những thông tin hữu ích. Cảm ơn các bạn vì đã dành thời gian để xem qua bài viết này nhé!
Văn Tài – Tổng hợp
Tham khảo nguồn ( completejavascript.com, viblo.asia, glints.com, … )
