HỌC APTECH - HỌC TẠI FPT
20/04/2018, 21:49 Hôm qua: 5215 Hôm nay: 5124 khách  
 
  Các công cụ trên Chrome được giới lập trình viên yêu thích  
 

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
FPT-APTECH-cac-cong-cu-tren-chrome-duoc-gioi-lap-trinh-vien-yeu-thich

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
FPT-APTECH-cac-cong-cu-tren-chrome-duoc-gioi-lap-trinh-vien-yeu-thich

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
FPT-APTECH-cac-cong-cu-tren-chrome-duoc-gioi-lap-trinh-vien-yeu-thich

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
FPT-APTECH-cac-cong-cu-tren-chrome-duoc-gioi-lap-trinh-vien-yeu-thich

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.
FPT-APTECH-cac-cong-cu-tren-chrome-duoc-gioi-lap-trinh-vien-yeu-thich

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

FPT APTECH mở ra cho các bạn đam mê học tin học, học công nghệ thông tin chuyên sâu về học lập trình cơ hội được đào tạo Công Nghệ Thông Tin trong môi trường tiêu chuẩn chất lượng quốc tế ISO 9001

Học CNTT - Học Aptech - Học tại FPT

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:



 
  Chia sẻ với bạn bè qua
Chia sẻ với bạn bè qua:


 
     
 
Công nghệ khác:


Cách ngăn không cho Facebook theo dõi "nhất cử nhất động" của bạn trên mạngLỗ hổng bảo mật rình rập khắp nơi
Trào lưu ngôn ngữ lập trình: Sự trỗi dậy của dữ liệu lớnTop 10 ngôn ngữ lập trình 2016
Một lập trình viên trong cơn tức giận đã "hủy diệt" Internet chỉ bằng 11 dòng codeNguồn mở: hiểm họa tiềm tàng trong ứng dụng doanh nghiệp
  Xem tiếp    
 
 
Lịch khai giảng toàn hệ thống
 
Ngày
Giờ
Khóa
T.Tâm
TP Hồ Chí Minh
25/04/18
Tối
Học bằng Tiếng Anh. Nhấn vào để xem chi tiết
590 Cách Mạng Tháng Tám, Quận 3 (Sau siêu thị điện máy Chợ Lớn). Nhấn vào để xem chi tiết590 Cách Mạng Tháng Tám, Quận 3 (Sau siêu thị điện máy Chợ Lớn). Nhấn vào để xem chi tiết
Nhấn vào để đăng ký học lớp này
Hà Nội
28/04/18
Chiều
Học bằng Tiếng Anh. Nhấn vào để xem chi tiết
Đại học FPT. Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm. Nhấn vào để xem chi tiếtĐại học FPT. Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm. Nhấn vào để xem chi tiết
Nhấn vào để đăng ký học lớp này
28/04/18
Tối
Học bằng Tiếng Anh. Nhấn vào để xem chi tiết
Đại học FPT. Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm. Nhấn vào để xem chi tiếtĐại học FPT. Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm. Nhấn vào để xem chi tiết
Nhấn vào để đăng ký học lớp này
 
   
Thông Tin Khuyến Học
New ACCP i17 - Nhấn vào để xem chi tiết
Mừng Sinh Nhật Lần Thứ 12 FPT-APTECH
Nhấn vào để xem chi tiết
Bảng Vàng Thành Tích Sinh Viên FPT APTECH - Nhấn vào để xem chi tiết
FPT APTECH Catalogue
FPT APTECH Tour - Nhấn vào để xem chi tiết
THÔNG TIN KHÁC
Cập nhật công nghệ miễn phí cho tất cả cựu sinh viên APTECH toàn quốc
Tiết Thực Vì Cộng Đồng
APTECH Meeting 2011
Hội Thảo CNTT
Những khoảnh khắc không phai của Thầy Trò FPT-APTECH Ngày 20-11
 
 
         


Tổng Lượt Truy Cập: 24434922 khách đã xem
Copyright © FPT APTECH 2009 All Rights Reserved
Xem tốt nhất ở độ phân giải 1024 x 768 với IE6.0 trở lên
Học Aptech, Học lập trình, Học tin học hay muốn theo nghề lập trình hãy chọn FPT APTECH
Học lập trình web miễn phí học lập trình java học lập trình game miễn phí học lập trình .Net miễn phí đào tạo Công Nghệ Thông Tin chất lượng đảm bảo việc làm