Bảng điều khiển trình duyệt. Cách mở bảng điều khiển trong Mozilla

Nhiều người sử dụng các trình duyệt khiến chúng tôi trở thành một mạng lưới toàn cầu Internet. Tuy nhiên, các trang Internet được cấu trúc như thế nào, cách tự viết chúng - đây chỉ là thông tin dành cho những ai muốn tạo ra thứ gì đó mới mẻ. Tất cả các tính năng này đều bị ẩn đối với người dùng thông thường, tất cả đều vì lý do đơn giản và trực quan, nhưng trong bài viết này, chúng tôi sẽ xem xét chủ đề về cách mở bảng điều khiển trong trình duyệt Yandex, tại sao nó được tạo ra, nó hỗ trợ ngôn ngữ gì, v.v. . Bài viết được khuyến nghị cho người dùng không chỉ của trình duyệt Yandex

Tại sao bạn cần bảng điều khiển trong trình duyệt?

Có ba lý do để tạo bảng điều khiển trong trình duyệt:

Để gỡ lỗi trình duyệt ở giai đoạn thiết kế.
Để đào tạo các chuyên gia trẻ về các chức năng của một trình duyệt cụ thể.
Dành cho các chuyên gia gỡ lỗi các trang Internet của họ trong thời gian thực.

Ít người biết, nhưng bạn có thể viết trang web của riêng mình chỉ bằng 2 thứ: kiến thức và sổ ghi chú. Tuy nhiên, phương pháp này cực kỳ lãng phí thời gian của bạn, vì bạn sẽ phải lưu lại tài liệu sau mỗi lần thay đổi bất kỳ tham số nào. Một bảng điều khiển gỡ lỗi đặc biệt sẽ được giải cứu - đây là một trường trình duyệt nhất định chứa tất cả thông tin về trang và mã nguồn của nó. Bằng cách khám phá nó, bạn có thể tìm thấy rất nhiều điều thú vị, bao gồm cả lỗi của nhà phát triển. Để tránh mắc lỗi, hãy sử dụng bảng điều khiển trình duyệt.

Giả sử bạn đã tạo một trang Internet, nhưng bạn cần điều chỉnh hình ảnh theo kích thước yêu cầu, đầu ra sẽ đến bảng điều khiển, có khả năng gỡ lỗi trang theo thời gian thực, giúp tiết kiệm đáng kể thời gian và công sức. Trong phần tiếp theo của bài viết, chúng tôi sẽ hướng dẫn bạn cách mở bảng điều khiển trong trình duyệt Yandex. Kiến thức này chắc chắn sẽ giúp ích cho bạn nếu bạn là một quản trị trang web mới làm quen.

Cách mở bảng điều khiển dành cho nhà phát triển trong Yandex

Để mở bàn điều khiển, bạn sẽ cần sự kết hợp đặc biệt phím Nếu bạn đọc tài liệu dành cho bất kỳ trình duyệt nào, bạn sẽ thấy rằng việc sử dụng chuột thậm chí là không cần thiết. Có một số lượng phím tắt đáng kinh ngạc có thể đáp ứng mọi mong muốn của bạn.

Hướng dẫn cách mở bảng điều khiển trong trình duyệt Yandex:

Khởi chạy trình duyệt từ Yandex và sau đó đợi nó hết chỗ V. ĐẬP, nó sẽ chỉ mất một vài giây.
Bây giờ hãy mở bất kỳ trang Internet nào, chẳng hạn như Google, nhưng điều đó không thành vấn đề, bất kỳ trang nào cũng được.
Để mở công cụ Yandex, hãy nhấp vào phím tiếp theo: "Ctrl + Shift + I"
Nếu bạn muốn làm việc cụ thể với JavaScript - đây là ngôn ngữ lập trình, thì bạn sẽ cần giữ các phím sau: “Ctrl + Shift + J”

Tuy nhiên, trong các trình duyệt khác nhau Có nhiều cách khác nhau để mở bảng điều khiển, vì vậy trong đoạn tiếp theo chúng ta sẽ trình bày nhiều nhất trình duyệt phổ biến.

Mở bảng điều khiển trong các trình duyệt khác

Trước hết, cần thông báo: đừng cố sử dụng cùng một tổ hợp phím trên các trình duyệt khác nhau. Đã có nhiều trường hợp người dùng xóa nhầm tất cả dấu trang của mình và việc lấy lại chúng có thể khá khó khăn và đôi khi là không thể. Vì vậy, dưới đây sẽ là những ví dụ về cách mở console một cách chính xác.

Google Chrome. Có hai tùy chọn: vào cài đặt, tại đây sẽ có nút để mở bảng điều khiển hoặc nhấn tổ hợp phím “Ctrl + Shift + I”.
Opera. Trong menu “Công cụ phát triển” sẽ có nút “Mã nguồn” hoặc tổ hợp phím “Ctrl + U”.
Firefox. Trong cài đặt trình duyệt, “Ctrl + Shift + J”.
Cuộc đi săn. F12, hoặc vào “Tiện ích bổ sung”, tại đây sẽ có “Hiển thị menu dành cho nhà phát triển”

Cuối cùng

Chúng tôi hy vọng rằng bài viết này đã giúp bạn hiểu cách mở bảng điều khiển trong trình duyệt Yandex. Kiến thức này sẽ đặc biệt giúp ích cho sinh viên, nhà phát triển trẻ cũng như người dùng thông thường những người muốn biết về Công nghệ máy tính thêm một chút nữa, bởi vì họ là tương lai của thế giới chúng ta.

Trình duyệt Mozilla cung cấp nhiều công cụ khác nhau để làm việc và cải thiện hiệu suất của nó. Một trong những cải tiến này giúp nó có thể hoạt động với bảng điều khiển của toàn bộ trình duyệt.

Bảng điều khiển trong trình duyệt là gì

Phần tử này giống như bảng điều khiển web tiêu chuẩn, nhưng nó cho phép bạn làm việc không phải với các tab riêng lẻ mà với toàn bộ công cụ tìm kiếm. Nghĩa là, thông tin về lỗi, yêu cầu và các hành động khác sẽ được ghi lại ở đó.

Công cụ này ghi lại thông tin không chỉ của một tab riêng biệt mà còn của các tiện ích bổ sung, cũng như mã của chính công cụ tìm kiếm. Để sử dụng các cải tiến khác có sẵn trong bộ tiêu chuẩnđể phát triển web, bạn nên sử dụng Thanh công cụ. Bảng điều khiển cũng được sử dụng để thực thi các biểu thức JavaScript khác nhau.

Điều đáng lưu ý là bắt đầu từ 30 dòng Firefox này sẽ bị vô hiệu hóa. Để bảng điều khiển khởi động trong Mozilla, bạn cần gán mã true cho dòng about:config – devtools.chrome.enabled. Bạn cũng có thể sử dụng phương pháp khác để kích hoạt cải tiến.

Bạn phải chọn hộp bên cạnh “Bật trình duyệt Chrome và các công cụ gỡ lỗi tiện ích bổ sung” cho Firefox 40, trong phiên bản trước Tên của cột này có thể thay đổi đôi chút.

Sau khi mở cửa sổ nhà phát triển, bạn có thể thấy giao diện được chia làm 3 phần:

Các tính năng làm việc ở chế độ nhà phát triển web

Để tận dụng tối đa tất cả các cải tiến, bạn không chỉ cần biết cách mở bảng điều khiển mà còn phải biết một số bí mật khi làm việc với nó.

Một trong những điều rất Công cụ hữu ích- console.log. Nó được sử dụng để gỡ lỗi đầu ra, nhưng người dùng nâng cao cũng sử dụng một số phương pháp làm việc với thông tin khác. Ví dụ, nguyên lý hoạt động của console.log khá giống với printf.

Firefox cũng cho phép bạn sử dụng mẫu “%c” để áp dụng đối số thứ hai khi định dạng kiểu. Mozilla sẽ hiển thị một biểu tượng nhỏ xám bên cạnh thông tin như cảnh báo hoặc thông báo lỗi. Điều này có nghĩa là những thông báo này cần được chú ý. Thông báo gỡ lỗi không được chỉ định trong công cụ tìm kiếm này vì theo các nhà phát triển, chúng đã lỗi thời và thay vào đó nên sử dụng console.log().

Điều đáng chú ý là trong công cụ tìm kiếm này, bạn có thể sử dụng nhiều giá trị cùng một lúc. Để làm điều này, bạn cần phân tách chúng bằng dấu phẩy, rất thuận tiện khi đưa vào một dòng.

Sử dụng bộ hẹn giờ và trạng thái lưu

Chế độ nhà phát triển được bật có nghĩa là bạn có thể sử dụng bộ hẹn giờ. Nó có thể được khởi chạy thông qua console.time. Việc dừng bộ hẹn giờ được thực hiện bằng console.timeEnd. Thời gian được hiển thị bằng mili giây.

Việc đếm ngược bắt đầu từ thời điểm đồng hồ bấm giờ được kích hoạt. Ngoài ra, bạn có thể tạo dấu thời gian. Chúng được sử dụng cùng với thời gian lưu lượng truy cập HTTP để xác định thời gian thực thi một đoạn mã.

Thông thường, thông tin cần được lưu lại để tham khảo hoặc theo dõi nhật ký. Bạn không cần phải làm gì để lưu trạng thái hoặc dữ liệu được hiển thị giữa các lần mở trang. Firefox sẽ tự động lưu thông tin này. Bạn thậm chí có thể xóa tin nhắn sau khi kích hoạt nút bên phải góc trên cùng hoặc bằng cách mở lại bảng điều khiển.

Mở bảng điều khiển trong Mozilla Firefox khá đơn giản. Để làm được điều này, bạn cần có những kỹ năng cơ bản giúp bạn kiểm soát hoạt động của trình duyệt và thậm chí cải thiện nó nếu cần thiết.

» » »

Bảng điều khiển lỗi trình duyệt

1. Từ thanh menu, chọn “Công cụ” → “Bảng điều khiển lỗi” (Ctrl+Shift+J).

2. Trong cửa sổ xuất hiện, hãy chuyển sang tab “Lỗi”.

3. Nhấp vào phím phải di chuột qua văn bản lỗi, trong danh mục Chọn “Sao chép” và dán văn bản vào email hoặc bài đăng trên diễn đàn.

Để mở trình gỡ lỗi, hãy nhấp vào biểu tượng menu → “Công cụ bổ sung” → “Công cụ dành cho nhà phát triển” (Ctrl+Shift+I).

Sao chép hoặc chụp ảnh màn hình văn bản lỗi.

1. Để truy cập bảng điều khiển lỗi trong Trình duyệt Opera, trước tiên bạn phải truy cập vào thanh công cụ. Để thực hiện việc này, hãy nhấp vào nút “Menu” màu đỏ ở góc trên bên trái của trình duyệt và trong danh sách xuất hiện, hãy chọn “Hiển thị menu”.

2. Một thanh công cụ sẽ xuất hiện ở đầu trình duyệt, tại đây bạn cần chọn “Công cụ” → “Nâng cao” → “Bảng điều khiển lỗi”.

3. Trong cửa sổ mở ra, tất cả thông tin về các vấn đề liên quan đến việc tải trang sẽ xuất hiện. Để lựa chọn danh sách chung chỉ có lỗi, hãy nhấp vào từ “Tin nhắn” ở cuối cửa sổ và chọn “Lỗi” từ danh sách thả xuống.

4. Chọn văn bản lỗi - nhấp vào dòng đầu tiên của lỗi bằng nút chuột trái, giữ Nút chuyển đổi và nhấp vào dòng dưới cùng của lỗi. Tiếp theo, sao chép văn bản và dán vào email hoặc bài đăng trên diễn đàn.

Việc khởi chạy trình gỡ lỗi trong Safari được chia thành hai bước: bật menu phát triển và khởi chạy trình kiểm tra web.

Kích hoạt Menu nhà phát triển

1. Bằng cách nhấp vào biểu tượng bánh răng ở góc trên bên phải của trình duyệt, chọn “Cài đặt” (Ctrl+b).

2. Chuyển đến tab “Tiện ích bổ sung”, chọn hộp bên cạnh “Hiển thị menu Phát triển trong thanh menu”.

3. Đóng tab Tiện ích bổ sung.

Khởi chạy Trình kiểm tra web

1. Chọn mục menu “Phát triển” → “Hiển thị trình kiểm tra web” (Ctrl+Alt+w).

2. Chọn tab “Tập lệnh”, nhấp vào nút “Bật gỡ lỗi”.

3. Biểu tượng ở góc dưới bên phải biểu thị số lỗi. Bằng cách nhấp vào biểu tượng, bạn sẽ mở bảng điều khiển có thông tin về các lỗi đã xảy ra. Đánh dấu trong bảng điều khiển toàn văn lỗi(điều này nên được thực hiện bằng cách sử dụng nút chuột trái từ dưới lên trên). Bằng cách nhấp chuột phải vào văn bản nền (không phải liên kết!), sao chép và dán văn bản vào email hoặc bài đăng trên diễn đàn.

1. Khi xảy ra lỗi, biểu tượng cảnh báo sẽ xuất hiện ở góc dưới bên trái của trình duyệt hoặc cảnh báo tương tự được hiển thị trong cửa sổ mở ra.

2. Chọn mục menu “Công cụ” → “Công cụ dành cho nhà phát triển” (F12) và chuyển đến tab “Tập lệnh”.

3. Trên tab “Tập lệnh”, nhấp vào nút “Bắt đầu gỡ lỗi”.

4. Tất cả các lỗi được hiển thị ở phía bên phải của cửa sổ bảng điều khiển. Chọn và sao chép văn bản lỗi rồi dán vào email hoặc bài đăng trên diễn đàn.

Trang web của chúng tôi đã xuất bản nhiều tập lệnh Java khác nhau cho mạng xã hội. Và trong phần mô tả của từng kịch bản mô tả hướng dẫn chi tiết vào ngày ra mắt... Điều này chẳng ích gì. Chúng tôi quyết định viết một hướng dẫn đầy đủ mô tả việc cài đặt tập lệnh trên tất cả các trình duyệt, đồng thời tính đến sự hiện diện của một số phương pháp cài đặt trên một trình duyệt cụ thể và mô tả tất cả chúng.

Chạy các tập lệnh Java thông qua bảng điều khiển trình duyệt:

Bây giờ, như bạn đã biết, khởi chạy tập lệnh thông qua bảng điều khiển là cách phổ biến nhất, đơn giản nhất và quan trọng nhất là cách sử dụng chúng. Do đó, đây là nơi chúng ta sẽ bắt đầu - với các cách vào bảng điều khiển cho từng trình duyệt.

Bảng điều khiển trong Mozilla Firefox:

Cách dễ nhất để truy cập bảng điều khiển web trong trình duyệt Mozilla Firefox là sử dụng phím tắt Điều khiển + Sự thay đổi + K. Nhấp vào và bảng điều khiển sẽ xuất hiện.

Bảng điều khiển trong Google Chrome và các trình duyệt dựa trên Chrome khác:

Google Chrome, Opera 15+, Amigo, Orbitum và các trình duyệt dựa trên Chrome khác cũng có cách khởi chạy bảng điều khiển web bằng phím nóng. Để thực hiện việc này, bạn cần nhấn đồng thời Điều khiển + Sự thay đổi + J.

Bảng điều khiển trong Opera 12:

Để khởi chạy bảng điều khiển web trong trình duyệt Opera ngày xưa thế hệ (không cũ hơn phiên bản 12), bạn cần sử dụng phím tắt Điều khiển + Sự thay đổi + TÔI. Thao tác này sẽ khởi chạy Opera Dragonfly, một thanh công cụ dành cho nhà phát triển. Sau khi mở nó, hãy chuyển đến tab Bảng điều khiển.

Bảng điều khiển trong trình duyệt web IE:

Để mở bảng điều khiển trong trình duyệt web Internet Explorer, trước tiên bạn phải nhấp vào nút F12, rồi nhấn tổ hợp Điều khiển + 2 (cả 2 nằm ở bảng trung tâm chứ không phải ở phần Num).

Bảng điều khiển Safari:

Trong Safari, trước khi mở bảng điều khiển, bạn phải nhập cài đặt trình duyệt ( bánh răngở góc trên bên phải" Cài đặt… » Tiện ích bổ sung) và kích hoạt tùy chọn Hiển thị menu Phát triển trong thanh menu. Sau này, bảng điều khiển có thể được gọi bằng phím tắt Điều khiển + thay thế + C.

Tất cả các tập lệnh được nhập vào bảng điều khiển trong một trường được chỉ định đặc biệt bên cạnh biểu tượng mũi tên (xem ảnh chụp màn hình, các khu vực để nhập tập lệnh được đánh dấu bằng khung màu đỏ). Tập lệnh được khởi chạy bằng cách nhấn nút Đi vào. Sau khi nhập và chạy bất kỳ tập lệnh nào, bạn sẽ thấy bất kỳ nhận xét hoặc lỗi nào khi chúng chạy.

Chạy tập lệnh Java từ thanh địa chỉ trình duyệt:

Phương pháp khởi chạy tập lệnh từ thanh địa chỉ của trình duyệt là một phương pháp cũ hơn và thậm chí còn truyền thống hơn. Ban đầu, tất cả các tập lệnh đều được khởi chạy theo cách này. Nhưng xu hướng thay đổi, thế giới phát triển. Trong hầu hết các trình duyệt, sau khi dán mã script vào thanh địa chỉ bạn cần thêm mã theo cách thủ công để chạy nó và trong một số trình duyệt, thanh địa chỉ hoàn toàn không xử lý các tập lệnh java.

Thanh địa chỉ trong Mozilla Firefox:

Thật đáng buồn, nhưng không có gì nhiều nhất phiên bản mới nhất trình duyệt Mozilla Firefox không hỗ trợ xử lý script thông qua thanh địa chỉ. Mặc dù nhiều hơn phiên bản trước một lựa chọn tương tự đã có mặt trong hiện đại Nhà phát triển Firefox quyết định từ bỏ nó.

Thanh địa chỉ trong Google Chrome và các trình duyệt dựa trên Chrome khác:

TRONG trình duyệt Google Chrome và mọi trình duyệt khác được xây dựng trên đó mã nguồn, chẳng hạn như Opera 15+, Amigo, Orbitum và các phiên bản khác, bạn có thể chạy tập lệnh trên thanh địa chỉ. Nhưng! Sau khi chèn script phải thêm chữ vào trước nó javascript:(cùng với dấu hai chấm), ngược lại (nhờ hiện tượng như thanh địa chỉ) thay vì chạy tập lệnh, hãy chuyển hướng đến máy tìm kiếm.

Thanh địa chỉ trong Opera 12:

Trong trình duyệt Opera 12, mọi thứ tốt hơn nhiều. Để chạy tập lệnh, chỉ cần dán tập lệnh vào thanh địa chỉ và chạy tập lệnh. Không nên có bất kỳ vấn đề với điều này.

Thanh địa chỉ trong Internet Explorer:

TRONG trình duyệt này, như trong Google Chrome và những thứ tương tự, sau khi chèn tập lệnh vào thanh địa chỉ, ngay từ đầu bạn cần thêm javascript:(cùng với dấu hai chấm), nếu không tập lệnh sẽ không hoạt động.

Thanh địa chỉ trong Safari:

Chà, trong Safari mọi thứ cũng tốt như trong Opera 12. Chỉ cần dán tập lệnh hiện có vào thanh địa chỉ và chạy nó.

Sử dụng plugin trình duyệt để lưu trữ và chạy tập lệnh:

Nếu các tập lệnh cần được sử dụng liên tục thì bạn cần mày mò, sao chép chúng từ trang web hoặc tập tin văn bản, dán vào thanh địa chỉ hoặc bảng điều khiển mọi lúc. Đồng ý, điều này không thuận tiện. Đó là lý do tại sao các tiện ích mở rộng (plugin) đặc biệt dành cho trình duyệt đã được phát minh, thiết kế để lưu trữ và chạy các tập lệnh. Chúng ta sẽ nói về hai plugin: Greasemonkey cho Mozilla Firefox và Tampermonkey cho Google Chrome.

Plugin Greasemonkey cho Mozilla Firefox:

Plugin Greasemonkey dành cho Mozilla Firefox cho phép bạn tạo, lưu và chạy các tập lệnh do người dùng thêm vào. Hãy cẩn thận! Khi sử dụng tập lệnh để xóa hoặc thay đổi nội dung nào đó, ngay sau khi thêm tập lệnh vào plugin, chúng sẽ tự động khởi chạy. Chúng tôi thực sự không khuyên bạn nên thêm tập lệnh vào plugin, chẳng hạn như để xóa bài đăng khỏi tường VKontakte khi trang VKontakte đang mở (bạn không bao giờ biết).

Hướng dẫn sử dụng:

Plugin Tampermonkey cho Google Chrome:

Plugin Tampermonkey là một plugin tương tự của plugin Greasemonkey dành cho Firefox và theo cách tương tự, nó cho phép bạn tạo, lưu và chạy các tập lệnh tùy chỉnh. Hãy cẩn thận! Khi sử dụng tập lệnh để xóa hoặc thay đổi nội dung nào đó, ngay sau khi thêm tập lệnh vào plugin, chúng sẽ tự động khởi chạy. Chúng tôi thực sự không khuyên bạn nên thêm tập lệnh vào plugin, chẳng hạn như để xóa bài đăng khỏi tường VKontakte khi trang VKontakte đang mở (bạn không bao giờ biết).

Hướng dẫn sử dụng:

Đây là cách hoạt động của plugin Greasemonkey và Tampermonkey. Mọi thứ đều nhanh chóng và đơn giản. Các tập lệnh được thêm vào không biến mất ở bất cứ đâu; chúng cũng có thể được bật và tắt bất kỳ lúc nào thuận tiện.

Phần kết luận:

Tất cả các phương pháp được mô tả để chạy Javascript đều được mô tả cho các phiên bản mới nhất của trình duyệt web phổ biến. Nếu bạn đang sử dụng trình duyệt khác trở lên Phiên bản lỗi thời trình duyệt và các phương pháp chạy tập lệnh trong đó khác với các phương pháp được mô tả trong bài viết này, vui lòng báo cáo điều này trong phần nhận xét.

Mỗi trình duyệt có cái riêng công cụ phát triển là thứ mà nhiều người gọi đơn giản là “bảng điều khiển”, hãy xem xét Bảng điều khiển trong trình duyệt Chrome. Nó trông như thế này:

Trên thực tế, Bảng điều khiển trong trình duyệt Chrome là một công cụ mà bạn không chỉ có thể xem nội dung của trang được trình duyệt hiển thị cũng như các lỗi hiện có (đó là điều mà những người kiểm tra thường làm nhất) mà còn có thể khắc phục nhiều lỗi này. dễ dàng hơn và nhanh hơn (điều này thường được các nhà phát triển thực hiện), đo lường các chỉ số khác nhau và thao tác trên trang.

Cách mở bảng điều khiển trong trình duyệt Chrome:

- Phím F12;

— bằng cách nhấn đồng thời các phím Ctrl + Shift + I;

— Nhân dân tệ trên một thành phần trang -> Xem mã;

- trình đơn trình duyệt -> Công cụ bổ sung-> Công cụ dành cho nhà phát triển.

Nó có thể nằm ở cuối trang hoặc ở bên cạnh hoặc có thể được bỏ ghim vào một cửa sổ riêng. Vì vậy, chúng ta hãy xem xét riêng từng tab của bảng điều khiển đang mở.

Tổng cộng, nó có 8 tab, mỗi tab hiển thị một số dữ liệu nhất định:

1 – Yếu tố(chứa tất cả mã html/css của trang và cho phép bạn chọn các thành phần để nghiên cứu cũng như chỉnh sửa chúng)

2 – Bảng điều khiển(hiển thị sự hiện diện/không có lỗi/cảnh báo trong mã)

3 – Nguồn(cho phép bạn thực hiện các thao tác trên mã trang)

4 – Mạng(theo dõi thời gian thực hiện của một số yêu cầu nhất định và chính các yêu cầu đó)

5 – Mốc thời gian(đo thời gian tải trang)

6 – Hồ sơ(cho phép bạn tạo JavaScript, cấu hình CPU)

7 – Tài nguyên ( cho phép bạn xem dữ liệu đã lưu nhất định)

8 – Kiểm toán(kiểm tra các thông số nhất định)

Bây giờ chúng ta hãy đi qua từng cái một cách riêng biệt và chi tiết hơn:

bảng điều khiển Yếu tố

Bảng Thành phần hiển thị bố cục trang chính xác như được hiển thị trong trình duyệt. Bạn có thể thay đổi trực quan nội dung của trang web bằng cách thay đổi mã html/css trong bảng thành phần. Như bạn có thể nhận thấy (hoặc có thể không), cửa sổ bên trái hiển thị tài liệu html và cửa sổ bên phải hiển thị css. Bằng cách thực hiện các thao tác đơn giản với dữ liệu, bạn có thể thay đổi nội dung và thiết kế của trang đang mở. Ví dụ: bạn có thể thay đổi văn bản trong cửa sổ nếu bạn chỉnh sửa nó trong phần nội dung html và cũng có thể thay đổi phông chữ của trang bằng cách thay đổi giá trị của nó trong trường css. Nhưng điều này sẽ không lưu dữ liệu đã nhập mà chỉ giúp đánh giá trực quan các thay đổi được áp dụng. Ngoài ra, bạn có thể xem mã của một thành phần trang cụ thể. Để thực hiện việc này, hãy nhấp chuột phải vào nó và chọn lệnh “Xem mã”.

Bảng điều khiển Elements có một tính năng rất thú vị. Bạn có thể thấy nó trông như thế nào mở trang trên một số thiết bị có phần mở rộng màn hình khác. Bằng cách nhấp vào biểu tượng điện thoại ở bên trái tab Thành phần, một cửa sổ sẽ xuất hiện trong đó bạn có thể thay đổi kích thước của màn hình dự định, do đó mô phỏng một thiết bị cụ thể và điều khiển việc hiển thị trang trên đó. Nó trông như thế này:

Khi bạn bấm vào nút Chọn Model, một danh sách thả xuống sẽ xuất hiện với sự lựa chọn vĩ đại thiết bị. Chọn những gì bạn cần - và thì đấy! Trang được hiển thị như thể nó là một thiết bị. Bằng cách này, bảng Elements không chỉ có thể được sử dụng để xem hoặc chỉnh sửa một trang mà còn để mô phỏng các thiết bị hiển thị. Mọi thứ đều được hợp nhất và có sẵn trong Chrome!

bảng điều khiển Bảng điều khiển

Tab phổ biến nhất dành cho người thử nghiệm, vì đây là nơi chúng tôi thấy các lỗi được tìm thấy trong mã khi thực thi tập lệnh. Bảng này cũng hiển thị nhiều loại cảnh báo và khuyến nghị khác nhau (như trong hình trên). Tất cả các tin nhắn hiển thị trong tab có thể được lọc. Lỗi cũng hiển thị vị trí của nó và khi nhấp vào nó, bạn sẽ được đưa đến tab Nguồn, nơi lỗi sẽ được hiển thị trong Thiết kế chung trang.

Bạn có thể xóa trường tab Console (trong trường hợp bạn cần xóa thông báo về các lỗi trước đó) bằng cách nhấp vào biểu tượng vòng tròn gạch chéo. Bạn có thể lọc tin nhắn trong bảng điều khiển theo loại - lỗi, cảnh báo, thông tin, đầu ra tiêu chuẩn, thông báo trình gỡ lỗi, đã sửa - bằng cách chọn một trong các Tùy chọn có sẵn bảng điều khiển.

bảng điều khiển Nguồn

Theo quy định, tab này là nơi các lập trình viên gỡ lỗi mã. Nó có 3 cửa sổ (từ trái sang phải):

Vùng tập tin nguồn. Nó chứa tất cả các tệp được kết nối với trang, bao gồm cả JS/CSS.
Vùng văn bản. Nó chứa văn bản của các tập tin.
Vùng thông tin và kiểm soát

Trong vùng tệp nguồn, phần tử bắt buộc được chọn, trong vùng văn bản, nó được gỡ lỗi trực tiếp và trong vùng thông tin và kiểm soát, bạn có thể bắt đầu/dừng mã gỡ lỗi.

bảng điều khiển Mạng

Chức năng chính của tab này là ghi lại nhật ký web. Nó cung cấp khả năng hiển thị theo thời gian thực về các tài nguyên đang được yêu cầu và tải. Bạn có thể xác định tài nguyên nào đang được tải và xử lý số lượng lớn thời gian để sau đó biết trang có thể được tối ưu hóa ở đâu và bằng cách nào.

Cũng cần lưu ý rằng trong tab này ở chế độ Hàng yêu cầu lớn, bạn có thể xem các yêu cầu được gửi đến máy chủ, cũng như các phản hồi đến từ đó, nội dung và đặc điểm của chúng.

Bảng hiệu suất

Tab này được sử dụng nếu cần thiết đánh giá đầy đủ thời gian đã bỏ ra. Nó được chi vào việc gì, cần bao nhiêu cho quá trình này hay quá trình kia. Tuyệt đối mọi hoạt động đều được hiển thị ở đây, bao gồm tải tài nguyên và thực thi Javascript.

Bảng điều khiển này cho phép lập cấu hình thời gian thực thi và mức sử dụng bộ nhớ của ứng dụng web hoặc trang, từ đó giúp hiểu chính xác nhiều tài nguyên đang được sử dụng ở đâu và cách tối ưu hóa mã.

CPUHồ sơ cung cấp thông tin về thời gian thực thi Javascript.

Trình phân tích vùng heap hiển thị phân bổ bộ nhớ.

Hồ sơ JavaScript chi tiết chính xác về thời gian đã sử dụng khi thực thi tập lệnh.

Được thiết kế để kiểm tra các phần tử được tải. Cho phép bạn tương tác với Cơ sở dữ liệu HTML5, Bộ nhớ cục bộ, Cookie, AppCache, v.v. Trong tab này, bạn có thể xóa cookie bằng cách mở tab này và nhấp vào biểu tượng vòng tròn bị gạch chéo

bảng điều khiển Kiểm toán

Bảng điều khiển này hoạt động như một bộ phân tích trang trong khi nó đang tải. Theo kết quả kiểm tra, các đề xuất xuất hiện để tối ưu hóa việc tải trang và tăng tốc độ phản hồi. Bạn có thể xem ví dụ về các phương pháp tối ưu hóa trong cửa sổ bên dưới.

Bảng bảo mật

Bảng điều khiển bảo mật hiển thị thông tin về từng yêu cầu và nêu bật những yêu cầu khiến trang web không nhận được biểu tượng màu xanh lá cây đáng thèm muốn trong trạng thái.

Ngoài ra, bạn có thể có được những thông tin sau:

về việc kiểm tra chứng chỉ, liệu trang web có xác nhận tính xác thực của nó bằng chứng chỉ TLS hay không;
Kết nối TLS, cho biết trang web của bạn có sử dụng các giao thức bảo mật hiện đại hay không;
bảo mật của các nguồn thứ cấp được tải.

Trên thực tế, các công cụ dành cho nhà phát triển (Bảng điều khiển trong trình duyệt Chrome) là một thứ rất hữu ích và thường có ích cho chúng ta, những người thử nghiệm. Thậm chí nhiều hơn thông tin hữu ích trên trang web https://developers.google.com/web/tools/chrome-devtools/