Trước đó, các nhà phát triển web vẫn yêu thích việc sửa lỗi JavaScript trên Firefox với Firebug hay với Visual Studio trên Internet Explorer. Hiện nay, hàng loạt công cụ được phát triển trên Chrome cho giới lập trình thêm lựa chọn với nhiều tính năng hỗ trợ nổi bật như trực tiếp chỉnh sửa CSS (live-editing CSS), sử dụng console và sửa lỗi. Sau đây là những công cụ mở rộng dành cho nhu cầu lập trình đáng chú ý trên Chrome

Chrome Developer Tools

Chrome Developer Tools

Chrome Developer Tools hay được gọi tắt là DevTools. Đây là bộ công cụ phát triển web được xây dựng sẵn trong Chrome, hỗ trợ cho lập trình viên trong việc theo dõi, xây dựng và sửa lỗi trên website của mình.

Người dùng có thể mở DevTools bằng cách đơn giản nhất là F12 hay sử dụng tổ hợp phím Ctrl + Shift + I (hoặc Cmd + Opt + I trên Mac). Ngoài ra có thể truy xuất công cụ này trên trình đơn, chon More Tool > Developer Tools.

Khi DevTools được mở, người dùng có thể sử dụng tổ hợp phím Ctrl + để di chuyển từ tab này sang tab khác.

Một trong những tính năng được ưa thích nhất của DevTools là xem HTML và CSS trong tab Elements được hiển thị trực quan trong Chrome. Tính năng Inspect Element cho phép người lập trình có thể tập trung vào các đoạn cụ thể.

Ngoài ra, người dùng có thể sửa trực tiếp CSS trong cửa sổ Styles ở bên phải. Việc này cho phép xem làm thế nào để thay đổi giao diện của trang web trong quá trình xử lý mà không phải thông qua các trình soạn thảo code.

JavaScript Console

Chrome JavaScript Console là công cụ để tìm kiếm và thông báo lỗi JavaScript. Người dùng cũng có thể tương tác với ngữ cảnh hiện tại từ console này. Để mở công cụ này, người dùng sử dụng tổ hợp phím Ctrl+Shift+J (hay Cmd+Opt+J trên máy Mac).

Audits

Công cụ Audits trên Chrome

Công cụ phân tích thống kê, tương tự như Validate HTML hay CSS. Khi công cụ này được kích hoạt thì người dùng sẽ nhận được các đề xuất, cảnh báo về những vấn đề đang xảy ra với trang web nhằm giúp cải thiện hiệu suất hoạt động. Công cụ này phù hợp với các trang web thương mại điện tử. Ví dụ như "minifying" trên CSS và các tập tin JavaScript, cho phép giảm số lượng không gian trắng, ngoài ra còn có thể kết hợp các tập tin nhằm giảm số lượng yêu cầu/truy vấn GET, tối ưu kích thước của các file hình ảnh, tối ưu kích thước cookie…

Network

Công cụ Network trong DevTools cho người dùng kiểm soát dòng thời gian và các danh sách yêu cầu hiện tại của HTTP cũng như khả năng phản hồi của website. Các yêu cầu sẽ ít hơn nếu chúng ta kích hoạt bộ nhớ cache. Các bộ lọc sẽ cho thông tin chi tiết để biết được những phần nào của trang web có phản hồi chậm và từ đó giúp người dùng xử lý thông qua việc chỉnh sửa các đoạn mã code.

PageSpeed Insights

Bạn có thể ấn phím F12 để chuyển sang chế độ Developer Tools, chọn Tab PageSpeed và click vào Analyze để phân tích. PageSpeed Insights sẽ chấm điểm dựa trên các tiêu chí đạt được cho bạn những lời khuyên hữu ích về việc tối ưu tốc độ website như: nén CSS, Javascript, HTML, tối ưu hóa hình ảnh... Đối với những tiêu chí website chưa được tối ưu thì cảnh báo màu đỏ cho thấy trang có nguy cơ cao nhất cần được tối ưu và xem lời khuyên mà PageSpeed Insights mang lại để tham khảo cách khắc phục. Ngoài ra màu vàng chỉ nguy cơ trung bình và màu xanh chỉ những yếu tố đã đạt được tiêu chuẩn của Google

YSlow

Công cụ đánh giá hiệu suất trang Web- YSlow

Công cụ YSlow là một phần mở rộng trên Chrome cho phép kiểm tra, đánh giá hiệu suất của trang web. YSlow phân tích trang web trên 23 nguyên tắc có thể kiểm chứng trên tổng số 34 nguyên tắc được tạo nên bởi Performance Exceptional Yahoo. Công cụ mã nguồn mở này được xây dựng từ năm 2012 và có phương thức hoạt động tương tự như PageSpeed Insights.

Profiles

Công cụ Profiles cho phép cấu hình thời gian thực hiện và sử dụng bộ nhớ của một ứng dụng web hoặc trên toàn trang. Công cụ này giúp người dùng hiểu được tài nguyên đang được sử dụng, và từ đó giúp tối ưu các đoạn mã cho trang web.

Resources

DevTools Resources là công cụ cho phép dễ dàng và nhanh chóng đánh giá tất cả kịch bản của một trang web. Đây là một phần nhỏ trong loạt tính năng của thẻ (tab) Resources giúp người dùng tìm hiểu phương thức hoạt động của website và những gì nó đang thực thi.

Thẻ Resources cho phép kiểm tra các nguồn tài nguyên được tải trong trang web, giúp người dùng tương tác với HTML5 Databases, Local Store, Cookies, AppCache...

Timeline

DevTools Timeline cho đánh giá về đồ họa của một trang web như thế nào. Ví dụ, có thể thấy 100 miligiây đầu chủ yếu dành cho việc tải và 100 miligiây tiếp theo dành cho việc kết xuất đồ họa.

Ngoài ra, công cụ này chỉ ra tất cả sự kiện, từ các nguồn tài nguyên được sử dụng trong hoạt động của trang web nhằm phân tích cú pháp JavaScript, cho đến việc đo hiệu năng dựng hình của ứng dụng.

Device emulation

Công cụ giả lập thiết bị di động

Chrome giống như Safari có thể được sử dụng bởi các thiết bị di động nhằm đánh giá thiết kế trang web, đặc biệt là xu hướng thiết kế responsive hiện nay. Việc giả lập thiết bị di động trên Chrome cho phép người dùng có cái nhìn toàn diện khi thiết kế web hay tạo ra các ứng dụng di động. Để kích hoạt tính năng Device emulation, bấm vào biểu tượng thiết bị điện thoại thông minh trong thanh DevTools Navigation.

Chrome Inspect Devices

Với một số thiết lập, Chrome trên máy tính có thể cho phép người dùng kiểm tra và gỡ rối khi trang web chạy trên các thiết bị di động. Không phải tất cả tính năng DevTools thể được sử dụng khi thao tác ở trên trình giả lập thiết bị di động nhưng công cụ này vẫn có thể đáp ứng 95% hiệu suất xử lý dành cho người dùng. Các thiết lập này là khá phức tạp và cần phải được thực hiện cả trên điện thoại và máy tính.

Các thiết lập trên thiết bị thiết bị cho phép khả năng phát triển một loạt tính năng mà trước đây người dùng không bao giờ sử dụng.

Phần mở rộng Web Developer

Web Developer là công cụ có thể thay thế DelvTool trên Chrome.

Nếu Chrome DevTools chưa thỏa mãn những gì bạn cần thì một trong những plugin đáng chú ý để thay thế trong phần mở rộng Chrome là Web Developer. Công cụ này cung cấp hơn 100 tính năng lớn nhỏ khác nhau nhằm đáp ứng được nhu cầu của các nhà phát triển.

WebStorm

WebStorm là công cụ thú vị dành cho HTML/CSS/Javascript và công nghệ liên quan. Công cụ này được phát triển dựa trên nền tảng JetBrains "IntelliJ IDEA" nên người dùng cần cài đặt JetBrains vào Chrome và chạy WebStorm để có thể sử dụng các tính năng gỡ rối.

Hầu hết thông tin thú vị được tìm thấy trong các trình gỡ lỗi WebStorm khi phát hiện ra trang web bị lỗi, trong khi đó tính năng Auto complete của trình chỉnh sửa và các tùy biến đều dễ sử dụng.

NetBeans Connector

NetBeans là công cụ tương tự như WebStorm với khả năng sửa lỗi khá thông minh và dễ sử dụng. NetBeans cũng có thể gỡ lỗi bằng cách sử dụng chính công cụ WebKit tích hợp

Hoàng Anh
(theo PCWorldVN)

Khối Giáo dục FPT – fpt.edu.vn

Trường Đào Tạo Lập Trình Viên Quốc Tế – fpt.aptech.edu.vn

Tin liên quan: