Các bộ công cụ tích hợp cho các nhà thiết kế, nhà phát triển và người thử nghiệm web
Ngoài hầu hết các nhà sản xuất trình duyệt tập trung vào người dùng hàng ngày muốn lướt web, họ cũng phục vụ cho các nhà phát triển web, nhà thiết kế và chuyên gia đảm bảo chất lượng, giúp xây dựng các ứng dụng và trang web mà những người dùng đó truy cập bằng cách tích hợp các công cụ mạnh mẽ vào trình duyệt chính họ.
Đã qua rồi những ngày mà các công cụ kiểm tra và lập trình duy nhất được tìm thấy trong trình duyệt cho phép bạn xem mã nguồn của trang và không có gì khác. Các trình duyệt của ngày hôm nay cho phép bạn lặn sâu hơn bằng cách thực hiện và gỡ lỗi đoạn mã JavaScript, kiểm tra và chỉnh sửa các phần tử DOM, theo dõi lưu lượng truy cập mạng theo thời gian thực khi ứng dụng hoặc trang tải của bạn để xác định tắc nghẽn, phân tích hiệu suất CSS, đảm bảo rằng mã của bạn không sử dụng quá nhiều bộ nhớ hoặc quá nhiều chu kỳ CPU và hơn thế nữa. Từ góc nhìn thử nghiệm, bạn có thể tái tạo cách ứng dụng hoặc trang web sẽ hiển thị trong các trình duyệt khác nhau cũng như trên các thiết bị và nền tảng khác nhau thông qua sự kỳ diệu của thiết kế đáp ứng và trình mô phỏng tích hợp. Phần tốt nhất là bạn có thể làm tất cả những điều này mà không phải rời khỏi trình duyệt của mình!
Các hướng dẫn dưới đây hướng dẫn bạn cách truy cập các công cụ phát triển này trong một số trình duyệt Web phổ biến.
Google Chrome
Công cụ dành cho nhà phát triển của Chrome cho phép bạn chỉnh sửa và gỡ lỗi mã, kiểm tra các thành phần riêng lẻ để hiển thị các vấn đề về hiệu suất, mô phỏng các màn hình thiết bị khác nhau bao gồm cả màn hình chạy Android hoặc iOS và thực hiện một số chức năng hữu ích khác.
- Nhấp vào nút menu chính của Chrome, được đánh dấu bằng ba đường ngang và nằm ở góc trên bên phải của trình duyệt.
- Khi trình đơn thả xuống xuất hiện, hãy di con trỏ chuột của bạn qua tùy chọn Công cụ khác.
- Một menu phụ bây giờ sẽ xuất hiện. Chọn tùy chọn có nhãn Công cụ dành cho nhà phát triển . Bạn cũng có thể sử dụng phím tắt sau đây thay cho mục menu này: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (TÙY CHỌN) + COMMAND + I )
- Bây giờ giao diện Công cụ dành cho nhà phát triển Chrome sẽ được hiển thị, như được hiển thị trong ảnh chụp màn hình ví dụ này. Tùy thuộc vào phiên bản Chrome của bạn, bố cục ban đầu mà bạn thấy có thể hơi khác so với phiên bản được trình bày ở đây. Trung tâm chính của các công cụ nhà phát triển, thường nằm ở phía dưới cùng hoặc bên phải của màn hình, chứa các tab sau.
Các yếu tố: Cung cấp khả năng kiểm tra mã CSS và HTML cũng như chỉnh sửa CSS trực tiếp, xem hiệu ứng của các thay đổi của bạn trong thời gian thực.
Bảng điều khiển: Bảng điều khiển JavaScript của Chrome cho phép nhập lệnh trực tiếp cũng như gỡ lỗi chẩn đoán.
Nguồn: Cho phép bạn gỡ lỗi mã JavaScript thông qua giao diện đồ họa mạnh mẽ.
Mạng: Phân loại và hiển thị thông tin chi tiết về từng hoạt động có liên quan trên ứng dụng hoặc trang đang hoạt động, bao gồm tiêu đề yêu cầu và phản hồi hoàn chỉnh cũng như chỉ số thời gian nâng cao.
Dòng thời gian: Cho phép phân tích sâu về mọi hoạt động diễn ra trong trình duyệt ngay khi bắt đầu yêu cầu tải trang hoặc ứng dụng. - Ngoài các phần này, bạn cũng có thể truy cập các công cụ sau thông qua biểu tượng >> nằm ở bên phải của tab Dòng thời gian .
Hồ sơ: Được chia nhỏ thành các phần lược tả CPU và Heap , cung cấp mức sử dụng bộ nhớ toàn diện và thời gian thực thi tổng thể của ứng dụng hoặc trang đang hoạt động.
Bảo mật: Đánh dấu các vấn đề về chứng chỉ và các vấn đề liên quan đến bảo mật khác với trang hoặc ứng dụng đang hoạt động.
Tài nguyên: Đây là nơi bạn có thể kiểm tra cookie, bộ nhớ cục bộ, bộ nhớ cache của ứng dụng và các nguồn dữ liệu cục bộ khác được trang web hoặc ứng dụng hiện tại sử dụng.
Kiểm tra: Cung cấp các cách để tối ưu hóa thời gian tải của trang hoặc ứng dụng và hiệu suất chung. - Chế độ thiết bị cho phép bạn xem trang hoạt động trong trình mô phỏng hiển thị chính xác như nó xuất hiện trên một trong số hơn chục thiết bị, bao gồm một số mẫu Android và iOS nổi tiếng như iPad, iPhone và Samsung Galaxy. Bạn cũng được cung cấp khả năng mô phỏng các độ phân giải màn hình tùy chỉnh để phù hợp với nhu cầu phát triển hoặc thử nghiệm cụ thể của bạn. Để bật và tắt Chế độ thiết bị , hãy chọn biểu tượng điện thoại di động nằm ngay bên trái tab Yếu tố .
- Bạn cũng có thể tùy chỉnh giao diện của công cụ nhà phát triển của mình bằng cách nhấp vào nút menu được đại diện bởi ba dấu chấm được đặt theo chiều dọc và nằm ở phía xa bên phải của các tab đã nói ở trên. Từ trong trình đơn thả xuống này, bạn có thể định vị lại dock, hiển thị hoặc ẩn các công cụ khác nhau cũng như khởi chạy các mục nâng cao hơn như thanh tra thiết bị. Bạn sẽ thấy rằng các giao diện công cụ dev chính nó là tùy biến cao thông qua các thiết lập được tìm thấy trong phần này.
Mozilla Firefox
Phần Web Developer của Firefox bao gồm các công cụ dành cho nhà thiết kế, nhà phát triển và người thử nghiệm như trình chỉnh sửa kiểu và trình theo dõi nhắm mục tiêu theo pixel.
Sách được khuyến nghị: 25 tập lệnh Greasemonkey và Tampermonkey người dùng hàng đầu
- Nhấp vào nút menu chính của Firefox, được thể hiện bằng ba đường ngang và nằm ở góc trên bên phải của cửa sổ trình duyệt.
- Khi trình đơn thả xuống xuất hiện, chọn biểu tượng có nhãn Nhà phát triển . Trình đơn Web Developer bây giờ sẽ được hiển thị, chứa các tùy chọn sau. Bạn sẽ nhận thấy rằng hầu hết các mục menu đều có các phím tắt được liên kết với chúng.
Công cụ chuyển đổi: Hiển thị hoặc ẩn giao diện công cụ dành cho nhà phát triển, thường được đặt ở cuối cửa sổ trình duyệt. Phím tắt: Mac OS X ( ALT (TÙY CHỌN) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Thanh tra: Cho phép bạn kiểm tra và / hoặc tinh chỉnh mã CSS và HTML trên trang đang hoạt động cũng như trên thiết bị di động thông qua gỡ lỗi từ xa. Phím tắt: Mac OS X ( ALT (TÙY CHỌN) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Console: Cho phép bạn thực thi các biểu thức JavaScript trong trang đang hoạt động cũng như xem xét một bộ dữ liệu đăng nhập đa dạng bao gồm cảnh báo bảo mật, yêu cầu mạng, thông báo CSS và hơn thế nữa. Phím tắt: Mac OS X ( ALT (TÙY CHỌN) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Trình gỡ lỗi: Trình gỡ lỗi JavaScript cho phép bạn xác định và sửa lỗi bằng cách đặt các điểm ngắt, kiểm tra các nút DOM, các nguồn bên ngoài quyền màu đen và nhiều hơn nữa. Như trường hợp với Thanh tra , tính năng này cũng hỗ trợ gỡ lỗi từ xa. Phím tắt: Mac OS X ( ALT (TÙY CHỌN) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Trình chỉnh sửa kiểu: Cho phép bạn tạo bảng định kiểu mới và kết hợp chúng với trang Web đang hoạt động hoặc chỉnh sửa các trang tính hiện có và kiểm tra các thay đổi của bạn hiển thị như thế nào trong trình duyệt chỉ bằng một cú nhấp chuột. Phím tắt: Mac OS X, Windows ( SHIFT + F7 )
Hiệu suất: Cung cấp phân tích chi tiết về hiệu suất mạng của trang hoạt động, dữ liệu tốc độ khung hình, thời gian thực thi JavaScript và trạng thái, nhấp nháy sơn và nhiều thứ khác. Phím tắt: Mac OS X, Windows ( SHIFT + F5 )
Mạng: Liệt kê mỗi yêu cầu mạng được khởi xướng bởi trình duyệt cùng với phương thức tương ứng, miền gốc, loại, kích thước và thời gian đã trôi qua. Phím tắt: Mac OS X ( ALT (TÙY CHỌN) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Thanh công cụ dành cho nhà phát triển: Mở trình thông dịch dòng lệnh tương tác. Nhập trợ giúp vào trình thông dịch để biết danh sách tất cả các lệnh có sẵn và cú pháp thích hợp của chúng. Phím tắt: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Cung cấp khả năng tạo và thực thi các ứng dụng web thông qua một thiết bị thực chạy hệ điều hành Firefox hoặc thông qua Trình mô phỏng hệ điều hành Firefox. Phím tắt: Mac OS X, Windows ( SHIFT + F8 )
Trình điều khiển trình duyệt: Cung cấp chức năng tương tự như Bảng điều khiển Web (xem ở trên). Tuy nhiên, tất cả dữ liệu được trả lại là dành cho toàn bộ ứng dụng Firefox (bao gồm cả các tiện ích mở rộng và chức năng cấp trình duyệt) thay vì chỉ trang web đang hoạt động. Phím tắt: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Chế độ xem thiết kế đáp ứng: Cho phép bạn xem ngay lập tức một trang web ở các độ phân giải, bố cục và kích thước màn hình khác nhau để bắt chước nhiều thiết bị bao gồm máy tính bảng và điện thoại thông minh. Phím tắt: Mac OS X ( ALT (TÙY CHỌN) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: Hiển thị mã màu hex cho các pixel được chọn riêng lẻ.
Scratchpad : Cho phép bạn viết, chỉnh sửa, tích hợp và thực thi các đoạn mã JavaScript từ trong cửa sổ Firefox hiện ra. Phím tắt: Mac OS X, Windows ( SHIFT + F4 )
Nguồn trang: Công cụ nhà phát triển dựa trên trình duyệt gốc, tùy chọn này chỉ hiển thị mã nguồn có sẵn cho trang đang hoạt động. Phím tắt: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Tải thêm công cụ: Mở bộ sưu tập Hộp công cụ của nhà phát triển web trên trang web tiện ích chính thức của Mozilla, có khoảng một chục tiện ích mở rộng phổ biến như Firebug và Greasemonkey.
Microsoft Edge / Internet Explorer
Thường được gọi là F12 Developer Tools , một sự kính trọng với shortcut bàn phím đã khởi chạy giao diện từ các phiên bản trước của Internet Explorer, bộ công cụ dev trong IE11 và Microsoft Edge đã đi rất xa kể từ khi thành lập. màn hình, trình gỡ lỗi, trình mô phỏng và trình biên dịch trực tiếp.
- Nhấp vào menu Tác vụ khác, được biểu thị bằng ba dấu chấm và nằm ở góc trên bên phải của cửa sổ trình duyệt. Khi trình đơn thả xuống xuất hiện, chọn tùy chọn có nhãn Công cụ dành cho nhà phát triển F12 . Như tôi đã đề cập, bạn cũng có thể truy cập các công cụ thông qua phím tắt F12 .
- Giao diện phát triển bây giờ sẽ được hiển thị, thường ở cuối cửa sổ trình duyệt. Có sẵn các công cụ sau, mỗi công cụ có thể truy cập bằng cách nhấp vào tiêu đề tab tương ứng hoặc sử dụng phím tắt đi kèm.
Trình khám phá DOM: Cho phép bạn chỉnh sửa bảng định kiểu và HTML trong trang đang hoạt động, hiển thị kết quả đã sửa đổi khi bạn thực hiện. Sử dụng chức năng IntelliSense để tự động điền mã khi áp dụng. Lối tắt bàn phím: (CTRL + 1)
Bảng điều khiển: Cung cấp khả năng gửi thông tin gỡ lỗi bao gồm bộ đếm, bộ hẹn giờ, dấu vết và tin nhắn tùy chỉnh qua API tích hợp. Ngoài ra, cho phép bạn chèn mã vào một trang Web đang hoạt động và sửa đổi các giá trị được gán cho các biến riêng lẻ trong thời gian thực. Lối tắt bàn phím: (CTRL + 2)
Debugger: Cho phép bạn thiết lập các điểm ngắt và gỡ lỗi mã của bạn trong khi nó thực hiện, từng dòng nếu cần thiết. Lối tắt bàn phím: (CTRL + 3)
Mạng: Liệt kê mỗi yêu cầu mạng được khởi tạo bởi trình duyệt trong khi tải trang và thực thi bao gồm chi tiết giao thức, loại nội dung, mức sử dụng băng thông và hơn thế nữa. Lối tắt bàn phím: (CTRL + 4)
Hiệu suất: Tỷ lệ khung hình chi tiết, mức sử dụng CPU và các chỉ số liên quan đến hiệu suất khác để giúp bạn tăng tốc thời gian tải trang và các hoạt động khác. Lối tắt bàn phím: (CTRL + 5)
Bộ nhớ: Giúp bạn tách biệt và sửa lỗi rò rỉ bộ nhớ tiềm năng trên trang Web hiện tại bằng cách hiển thị dòng thời gian sử dụng bộ nhớ cùng với ảnh chụp nhanh từ các khoảng thời gian khác nhau. Lối tắt bàn phím: (CTRL + 6)
Thi đua: Cho bạn thấy trang hoạt động sẽ hiển thị như thế nào ở các độ phân giải và kích thước màn hình khác nhau, mô phỏng điện thoại thông minh, máy tính bảng và các thiết bị khác. Cũng cung cấp khả năng sửa đổi tác nhân người dùng và hướng trang, cũng như mô phỏng các vị trí địa lý khác nhau bằng cách nhập vĩ độ và kinh độ. Lối tắt bàn phím: (CTRL + 7) - Để hiển thị Bàn điều khiển trong khi trong bất kỳ công cụ nào khác, hãy nhấp vào nút hình vuông có khung bên phải bên trong nó, nằm ở góc trên bên phải của giao diện công cụ phát triển.
- Để bỏ khóa, giao diện công cụ dành cho nhà phát triển để nó trở thành một cửa sổ riêng biệt, nhấp vào nút được biểu thị bằng hai hình chữ nhật xếp tầng hoặc sử dụng phím tắt sau: CTRL + P. Bạn có thể đặt các công cụ trở lại vị trí ban đầu của chúng bằng cách nhấn CTRL + P lần thứ hai.
Apple Safari (chỉ dành cho OS X)
Bộ công cụ dev đa dạng của Safari phản ánh cộng đồng nhà phát triển lớn sử dụng máy Mac cho nhu cầu thiết kế và lập trình của họ. Ngoài một bảng điều khiển mạnh mẽ và tính năng ghi nhật ký và gỡ lỗi truyền thống, chế độ thiết kế đáp ứng dễ sử dụng và công cụ tạo tiện ích mở rộng trình duyệt của riêng bạn cũng được cung cấp.
- Nhấp vào Safari trong trình đơn trình duyệt, nằm ở đầu màn hình của bạn. Khi menu thả xuống xuất hiện, chọn Tùy chọn . Bạn cũng có thể sử dụng phím tắt sau đây thay cho mục menu này: COMMAND + COMMA (,)
- Giao diện Tùy chọn của Safari bây giờ sẽ được hiển thị, che phủ cửa sổ trình duyệt của bạn. Nhấp vào biểu tượng Nâng cao , nằm ở phía xa bên phải của tiêu đề.
- Tùy chọn Nâng cao giờ đây sẽ hiển thị. Ở dưới cùng của màn hình này là một tùy chọn có nhãn Show Develop menu trong thanh menu , kèm theo một hộp kiểm. Nếu không có dấu kiểm được hiển thị trong hộp, hãy nhấp vào nó một lần để đặt một dấu ở đó.
- Đóng giao diện Tùy chọn bằng cách nhấp vào dấu 'x' màu đỏ được tìm thấy ở góc trên bên trái.
- Bây giờ bạn sẽ thấy một tùy chọn mới trong trình đơn của trình duyệt có tên là Develop , nằm giữa Bookmarks và Window . Nhấp vào mục menu này. Một trình đơn thả xuống bây giờ sẽ được hiển thị, chứa các tùy chọn sau.
Mở trang bằng: Cho phép bạn mở trang Web đang hoạt động trong một trong các trình duyệt khác hiện được cài đặt trên máy Mac của bạn.
Tác nhân người dùng: Cho phép bạn chọn từ hơn một tá giá trị tác nhân người dùng được xác định trước bao gồm một số phiên bản của Chrome, Firefox và Internet Explorer, cũng như xác định chuỗi tùy chỉnh của riêng bạn.
Nhập Chế độ thiết kế đáp ứng : Cho phép trang hiện tại giống như trên các thiết bị khác nhau và ở các độ phân giải màn hình khác nhau.
Show Web Inspector: Khởi chạy giao diện chính cho các công cụ dev của Safari, thường được đặt ở cuối màn hình trình duyệt của bạn và chứa các phần sau: Elements , Network , Resources , Timelines , Debugger , Storage , Console .
Hiển thị Bảng điều khiển Lỗi: Cũng khởi chạy giao diện công cụ dành cho nhà phát triển, trực tiếp đến tab Bảng điều khiển hiển thị lỗi, cảnh báo và dữ liệu nhật ký có thể tìm kiếm khác.
Hiển thị Nguồn trang: Mở tab Tài nguyên , hiển thị mã nguồn cho trang đang hoạt động được phân loại theo tài liệu.
Hiển thị tài nguyên trang: Thực hiện cùng chức năng như tùy chọn Hiển thị nguồn trang .
Hiển thị Trình chỉnh sửa đoạn trích: Mở một cửa sổ mới, nơi bạn có thể nhập mã CSS và HTML, xem trước đầu ra của nó khi đang di chuyển.
Hiển thị Trình tạo tiện ích mở rộng: Cung cấp khả năng tạo hoặc chỉnh sửa tiện ích mở rộng Safari với CSS, HTML và JavaScript.
Show Timeline Recording: Mở tab Timeline và bắt đầu hiển thị các yêu cầu mạng, bố trí và hiển thị thông tin cũng như thực thi JavaScript trong thời gian thực.
Empty Caches: Xóa toàn bộ bộ nhớ cache hiện đang được lưu trữ trên ổ cứng của bạn.
Tắt bộ nhớ cache: Dừng Safari khỏi bộ nhớ đệm để tất cả nội dung được truy xuất từ máy chủ sau mỗi lần tải trang.
Tắt hình ảnh: Ngăn hình ảnh hiển thị trên tất cả các trang web.
Tắt Kiểu: Bỏ qua các thuộc tính CSS khi trang được tải.
Tắt JavaScript: Hạn chế thực thi JavaScript trên tất cả các trang.
Tắt tiện ích mở rộng: Cấm tất cả các tiện ích mở rộng được cài đặt chạy trong trình duyệt.
Vô hiệu hóa Hacks cụ thể cho trang web: Nếu Safari đã được sửa đổi để xử lý rõ ràng (các) vấn đề cụ thể cho trang Web đang hoạt động, tùy chọn này sẽ chặn những thay đổi đó để tải trang như trước khi các sửa đổi này được giới thiệu.
Vô hiệu hóa giới hạn tệp cục bộ: Cho phép trình duyệt có quyền truy cập vào tệp trên đĩa cục bộ của bạn, một hành động bị hạn chế theo mặc định vì lý do bảo mật.
Tắt giới hạn nguồn gốc chéo: Các giới hạn này được đặt theo mặc định để ngăn XSS và các mối nguy hiểm tiềm ẩn khác. Tuy nhiên, chúng thường cần phải tạm thời bị vô hiệu hóa vì mục đích phát triển.
Cho phép JavaScript từ Trường tìm kiếm thông minh: Khi được bật, cung cấp khả năng nhập URL bằng javascript: được tích hợp trực tiếp vào thanh địa chỉ.
Xử lý chứng chỉ SHA-1 là không an toàn: chứng chỉ SSL sử dụng thuật toán SHA-1 được coi là lỗi thời và dễ bị tổn thương.