Khám phá các công cụ dành cho nhà phát triển F12 trong IE9

Tác Giả: John Stephens

Ngày Sáng TạO: 27 Tháng MộT 2021

CậP NhậT Ngày Tháng: 19 Có Thể 2024

Khám phá các công cụ dành cho nhà phát triển F12 trong IE9 - Sáng TạO

NộI Dung

Bật các công cụ dành cho nhà phát triển F12
Thử nghiệm trên nhiều trình duyệt
Trình thay đổi chuỗi Tác nhân người dùng
Thêm chuỗi UA tùy chỉnh
Chế độ tài liệu
Kiểm tra và chỉnh sửa HTML và CSS
JavaScript và lập hồ sơ
Đăng nhập vào bảng điều khiển, không còn cảnh báo ()
Vì vậy, bạn nói hiệu suất là điều của bạn?
Tab Mạng

Các công cụ dành cho nhà phát triển đi kèm với Internet Explorer 9 (các công cụ phát triển F12 như chúng tôi gọi chúng một cách trìu mến) là một trợ giúp đắc lực để giải quyết các vấn đề về tính tương thích, mạng, cấu hình tập lệnh và hiệu suất; mã gỡ lỗi; quản lý HTML và CSS; chỉnh sửa nhanh chóng và xác nhận đánh dấu; và cuối cùng nhưng không kém phần quan trọng là kiểm tra HTML, CSS và JavaScript.Cá nhân tôi, các công cụ phát triển F12 đã giúp tôi rất nhiều trong việc hiểu cách một số trang web triển khai một số tính năng HTML5 mới như canvas>, video>, SVG và hơn thế nữa.

Mặc dù các công cụ dành cho nhà phát triển đã xuất hiện ở một số dạng kể từ Internet Explorer 7, nhưng với IE9, chúng tôi nhận được một số lợi ích thực sự bổ sung. Điều đó bao gồm những thứ như tab Mạng, cho phép bạn xem những gì được gửi đến máy chủ, tiêu đề yêu cầu, nội dung phản hồi, mã phản hồi, kiểm tra cookie, loại MIME, cuộc gọi Ajax và Activex, nhận thông tin về trình khởi tạo cuộc gọi và hơn thế nữa. Các bổ sung mới khác là tab Bảng điều khiển và trình thay đổi chuỗi Tác nhân người dùng.

Bật các công cụ dành cho nhà phát triển F12

Như bạn có thể mong đợi, nó đơn giản như nhấn F12. Bây giờ đó là một trong những dễ dàng để bắt đầu phải không? Bạn cũng có thể sử dụng nút Công cụ và sau đó chọn 'Công cụ dành cho nhà phát triển F12'. Bạn có thể thu nhỏ xuống dưới cùng, bật ra ngoài cửa sổ và sử dụng các phím Windows 7 để căn chỉnh các cửa sổ IE9 và công cụ dành cho nhà phát triển cạnh nhau (phím Windows + mũi tên trái / phải).

Thử nghiệm trên nhiều trình duyệt

Thỉnh thoảng chúng tôi gặp các trang web dường như không hiển thị tốt. Đôi khi, đó là một trang web không được tối ưu hóa cho chế độ tiêu chuẩn IE9, nhưng đôi khi nó chỉ đơn giản là một trang web hiển thị không tốt trong bất kỳ trình duyệt nào. Dưới đây là một số mẹo về cách các công cụ dành cho nhà phát triển F12 có thể giúp bạn kiểm tra kết xuất trong các phiên bản IE khác nhau và thậm chí hoạt động như một trình duyệt khác đối với máy chủ.

Trình thay đổi chuỗi Tác nhân người dùng

Khi gặp bất kỳ sự cố trang web nào mà tôi nghi ngờ có liên quan đến khả năng tương thích, trình thay đổi chuỗi UA sẽ giải cứu cho tôi. Đó là một trong những tính năng yêu thích của tôi trong các devtools mà tôi có thể nói. Chuỗi UA hoặc chế độ Trình duyệt tác động đến chuỗi UA được gửi đến máy chủ web. Do đó, IE9 có thể hoạt động như một trình duyệt khác và nhận một bộ mã HTML và CSS khác từ máy chủ.

Bạn có thể truy cập nó bằng cách chọn Chế độ trình duyệt trong menu hoặc đi tới Công cụ> Thay đổi chuỗi tác nhân người dùng.

Một trong những trang web mà tôi đã gặp phải khiến tôi có một hành vi kỳ lạ trong IE9 là www.laredoute.be. Thêm bất kỳ thứ gì vào giỏ hàng sẽ trả về trang lỗi 500 từ máy chủ. Đây không chỉ là kết xuất, có điều gì đó thực sự không ổn ở đây!

Vì vậy, đã đến lúc điều tra với trình thay đổi chuỗi UA. Ví dụ: tôi có thể buộc máy chủ gửi nội dung xuống như thể tôi đang sử dụng IE7:

Hoặc, có thể tôi chỉ có thể kiểm tra trang giống như khi tôi đang sử dụng Mozilla Firefox (hoặc Google Chrome cho vấn đề đó):

Chắc chắn, nó không hiển thị gây ra sự cố mà thực sự là một số loại kiểm tra trình duyệt cụ thể của IE đang thất bại. Đã tải lại trang được đặt thành chuỗi Firefox UA và bây giờ việc thêm các mục vào giỏ hàng không còn là vấn đề nữa!

Gợi ý: tìm nguyên nhân gây ra sự cố trên IE9 bằng cách kiểm tra tab Console…

Bạn sẽ nhận thấy mã phát hiện trình duyệt thường là thủ phạm: trình thay đổi chuỗi UA sẽ cho phép bạn xác định và tìm ra giải pháp.

Thêm chuỗi UA tùy chỉnh

Bạn có thể nhận thấy rằng tôi có một chuỗi UA “WP7 Emulator” trong danh sách của mình. Đây chỉ đơn giản là một chuỗi UA tùy chỉnh mà tôi đã thêm để kiểm tra một số trang web về cách chúng sẽ hiển thị trong trình duyệt Windows Phone 7.

Để thêm chuỗi UA của riêng bạn, hãy chuyển đến Công cụ> Thay đổi chuỗi tác nhân người dùng> Tùy chỉnh.

Chế độ tài liệu

Bạn cũng có thể thay đổi chế độ tài liệu, chế độ này kiểm soát xem IE9 có nên sử dụng hành vi gần đây nhất cho HTML, CSS, DOM và JavaScript hay không.

Hãy lấy ví dụ về một trang web sử dụng thẻ video>. Điều gì xảy ra nếu người dùng có IE8? Chế độ tài liệu giúp bạn dễ dàng kiểm tra. (Hãy tự mình kiểm tra và truy cập www.dailymotion.com/html5.)

Đây là trang hiển thị video ở chế độ tiêu chuẩn, tận dụng lợi thế của thẻ video>:

Việc chọn chế độ tài liệu IE8 làm cho trình duyệt sử dụng hành vi IE8. Vì IE8 không hỗ trợ thẻ video> nên nó hiển thị văn bản dự phòng. Lưu ý cách chỉ thị loại tài liệu đã được nhận xét tự động trong chế độ hiển thị này.

Lưu ý rằng chế độ tài liệu cũng có thể được thực thi sang chế độ IE7 hoặc IE8 thông qua thẻ meta http-equiv thuộc tính “X-UA-Tương thích”.

Bạn có thể tìm hiểu thêm về thẻ tương thích UXA tại đây: msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx.

Kiểm tra và chỉnh sửa HTML và CSS

Tab HTML cung cấp cho bạn khả năng kiểm tra HTML trong tài liệu, tìm kiếm qua các phần tử, xem các quy tắc CSS được áp dụng, chỉnh sửa và lưu lại tệp cục bộ.

Việc chọn một phần tử HTML được thực hiện bằng cách sử dụng biểu tượng Chọn (hoặc Ctrl + B) hoặc bằng cách sử dụng hộp tìm kiếm.

Lưu ý rằng tôi đã chọn ul> tạo danh sách ở bên trái. Phần tử được chọn trong cây DOM và các quy tắc Kiểu CSS áp dụng cho phần tử hiện tại được hiển thị ở bên phải. Tại đây, bạn có thể chỉnh sửa trực tiếp các quy tắc CSS và chọn / bỏ chọn các hộp để bật hoặc tắt các quy tắc.

Các kiểu theo dõi hiển thị danh sách các quy tắc CSS được áp dụng cho đối tượng hiện tại theo thứ tự bảng chữ cái, có tính đến xếp tầng CSS. Điều này rất hữu ích trong việc xác định lý do tại sao một quy tắc nhất định không được thực thi, ví dụ như do một loạt các quy tắc.

Các Công cụ bố cục cực kỳ hữu ích trong việc xem bất kỳ cài đặt nào liên quan đến đệm, lề, bù đắp cho bất kỳ phần tử nào. Nhờ vậy, không còn pixel viền nào được đặt trong chế độ gỡ lỗi để giúp tôi với đường viền và lề!

Các Thuộc tính công cụ này hữu ích để thêm hoặc chỉnh sửa trực tiếp các thuộc tính của phần tử đã chọn.

cuối cùng Tab CSS cho phép bạn xem tất cả quy tắc CSS của tất cả các biểu định kiểu nội tuyến và được liên kết. Tại đây bạn cũng có thể tìm kiếm, chỉnh sửa, bật / tắt các kiểu và lưu lại vào một tệp cục bộ.

JavaScript và lập hồ sơ

Tab JavaScript cung cấp cho bạn quyền truy cập vào tất cả các tập lệnh được tải bởi trang hiện tại. Bạn nhận được các công cụ như Bảng điều khiển để nhập tập lệnh trực tiếp, Xem, Người dân địa phương, Ngăn xếp cuộc gọi và Điểm ngắt. Hãy xem cách sử dụng disneydigitalbooks.go.com/tron/ làm ví dụ.

Xem tập lệnh mong muốn bằng cách chọn từ trình đơn thả xuống:

tiền boa: làm cho tập lệnh được rút gọn có thể đọc lại được bằng cách chọn Format JavaScript, một công cụ nhỏ siêu hữu ích.

Bạn có thể thêm điểm ngắt bằng cách nhấp chuột phải vào dòng mã mong muốn. Chạy và gỡ lỗi bằng cách sử dụng thanh công cụ ngữ cảnh cho phép bạn Chạy, Phá vỡ, Bước vào, Bước qua và Bước ra khỏi mã, giống như bạn có thể được sử dụng trong Visual Studio hoặc các IDE khác. Ngay cả các phím tắt cũng vậy.

tiền boa: bạn thậm chí có thể thêm một điểm ngắt chỉ để đánh khi một điều kiện nhất định là đúng (điểm ngắt có điều kiện). Nhấp chuột phải vào bất kỳ điểm ngắt nào và chọn Điều kiện. Nhập một biểu thức; nếu được đánh giá là true, điểm ngắt sẽ đạt.

Đăng nhập vào bảng điều khiển, không còn cảnh báo ()

Ai chưa bao giờ sử dụng alert () để gỡ lỗi một đoạn script? Tôi sẽ thừa nhận việc sử dụng nó một vài lần khi không có ai xem. Hôm nay, API ghi nhật ký xuất hiện để giải cứu để nắm bắt các thông báo trong mã của bạn. Lưu ý cách trang web Tron viết một số thông báo vào bảng điều khiển:

Vì vậy, bạn nói hiệu suất là điều của bạn?

Một tính năng khác không thể bỏ qua trong phần script là công cụ Profiling, giúp chúng ta xác định và khắc phục các vấn đề về hiệu suất một cách nhanh chóng. Nhấp vào Bắt đầu lập hồ sơ để ghi lại phiên. Sau khi ghi, báo cáo hồ sơ có thể được xem bằng Chức năng hoặc Cây cuộc gọi. Cá nhân tôi thích Cây cuộc gọi, nó cung cấp chế độ xem phân cấp của các cuộc gọi và cho phép tôi đi sâu hơn.

Khi bạn đi sâu vào cây cuộc gọi, bạn có thể nhấp đúp vào các hàm đã tải, thao tác này sẽ đưa bạn đến ngay dòng mã trên tệp gốc. Sự tốt lành thuần khiết.

Tab Mạng

Cuối cùng nhưng không kém phần quan trọng, bây giờ bạn có thể kiểm tra lưu lượng mạng bằng tab Mạng mới. Để nắm bắt lưu lượng mạng cho một trang cụ thể, bao gồm cả các lệnh gọi Ajax, hãy nhấn nút Bắt đầu chụp. Theo mặc định, tính năng chụp mạng được đặt thành tắt để ngăn tiêu thụ thêm tài nguyên.

Chế độ xem Tóm tắt cung cấp cho bạn tất cả các yêu cầu do trang thực hiện bao gồm các lệnh gọi từ JavaScript.

Bấm đúp vào bất kỳ yêu cầu nào để xem chi tiết. Tại đây, bạn có thể phân tích tiêu đề và nội dung Yêu cầu, tiêu đề và nội dung phản hồi (trong trường hợp này là tập lệnh jQuery), bất kỳ Cookie nào cho yêu cầu, Trình khởi xướng và Thời gian.

Người khởi xướng xứng đáng được đề cập đặc biệt. Nó cung cấp cho bạn thêm thông tin chi tiết cũng như liên kết trực tiếp đến dòng mã mà từ đó yêu cầu được bắt đầu.