Thực đơn
trang chủMicrosoft

Khi bạn khởi động firefox, bảng điều khiển trình duyệt sẽ mở ra. Bảng điều khiển trong Google Chrome và các trình duyệt dựa trên Chrome khác. Sử dụng bộ hẹn giờ và trạng thái lưu

|

Trình duyệt hiện đại cung cấp các công cụ phát triển tích hợp cho JavaScript và các công nghệ khác. Những công cụ này bao gồm một bảng điều khiển tương tự như giao diện shell cũng như các công cụ để kiểm tra, gỡ lỗi và phân tích hoạt động mạng của DOM.

Bảng điều khiển có thể được sử dụng để ghi thông tin như một phần của quá trình phát triển JavaScript. Bảng điều khiển cũng cho phép bạn tương tác với trang web bằng cách thực thi Biểu thức JavaScript trong ngữ cảnh của trang. Về cơ bản, giao diện điều khiển cung cấp khả năng viết Mã JavaScript và, nếu cần, hãy quản lý nó.

Hướng dẫn này sẽ hướng dẫn bạn cách làm việc với Bảng điều khiển JavaScript trong trình duyệt của bạn và giới thiệu cho bạn các công cụ phát triển tích hợp khác mà bạn có thể thấy hữu ích.

Làm việc với Bảng điều khiển JavaScript trong Trình duyệt

Hầu hết các trình duyệt web hiện đại hỗ trợ HTML và XHTML theo mặc định đều cung cấp quyền truy cập vào bảng điều khiển dành cho nhà phát triển, nơi bạn có thể làm việc với JavaScript trong giao diện giống như shell của thiết bị đầu cuối. Trong phần này, bạn sẽ tìm hiểu cách truy cập bảng điều khiển trong Firefox và Chrome.

Trình duyệt Firefox

Những công cụ này cho phép bạn kiểm tra và chỉnh sửa các phần tử DOM cũng như tìm kiếm đối tượng HTML, Có liên quan trang cụ thể. DOM có thể cho biết một đoạn văn bản hoặc hình ảnh có thuộc tính ID hay không và có thể xác định giá trị của thuộc tính đó.

Ngoài ra, trong thanh bên hoặc dưới bảng DOM bạn có thể tìm thấy Kiểu CSS, được sử dụng trong tài liệu HTML hoặc tờ định kiểu.

Để chỉnh sửa DOM theo thời gian thực, hãy nhấp đúp vào phần tử đã chọn. Ví dụ: bạn có thể thử chuyển thẻ

V.

.

Một lần nữa, sau khi cập nhật, trang sẽ có giao diện như cũ.

tab mạng

Tab Mạng cho phép bạn theo dõi và ghi lại các yêu cầu mạng. Tab này hiển thị các yêu cầu mạng của trình duyệt, bao gồm các yêu cầu tải trang, thời gian xử lý các yêu cầu và thông tin về từng yêu cầu. Dữ liệu này có thể được sử dụng để tối ưu hóa hiệu suất tải trang và truy vấn gỡ lỗi.

Bạn có thể sử dụng tab Mạng kết hợp với bảng điều khiển JavaScript. Ví dụ: bạn có thể bắt đầu gỡ lỗi một trang bằng bảng điều khiển, sau đó mở tab Mạng và xem hoạt động mạng mà không cần tải lại trang.

Thiết kế đáp ứng

Các trang web có thiết kế đáp ứng nhanh chóng điều chỉnh giao diện và chức năng của chúng cho phù hợp với các thiết bị khác nhau: điện thoại di động, máy tính bảng, máy tính để bàn và máy tính xách tay. Kích thước màn hình, mật độ pixel và phản hồi cảm ứng là những yếu tố cần xem xét khi thiết kế trang web phản hồi. Điều quan trọng nữa là phải xem xét các nguyên tắc thiết kế đáp ứng để đảm bảo rằng trang web có thể truy cập và hoạt động bất kể nó được mở trên thiết bị nào.

Các trình duyệt hiện đại (bao gồm Firefox và Chrome) cung cấp các mô hình để tuân theo các nguyên tắc thiết kế đáp ứng khi phát triển trang web và ứng dụng. Những mô hình này mô phỏng hoạt động của một thiết bị cụ thể, cho phép bạn kiểm tra và phân tích tất cả các chức năng của trang web.

Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn sử dụng trình duyệt:

  • Chế độ thiết kế đáp ứng trong Firefox

Phần kết luận

Hướng dẫn này trình bày Đánh giá ngắn làm việc với bảng điều khiển JavaScript trong các trình duyệt web hiện đại. Bạn cũng có thể tìm thấy thông tin về các công cụ phát triển hữu ích khác tại đây.

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 khác dựa trên Chrome:
Trong Google Chrome, Opera 15+, bạn ơi , quỹ đạo 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ở bên phải góc trên cùng » 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+, bạn ơi , quỹ đạo và những thứ 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 đặc biệt khuyên bạn không 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 mở trang VKontakte (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.

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 một chút.

Sau khi mở cửa sổ nhà phát triển, bạn có thể thấy giao diện được chia thành 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 ở góc trên bên phải 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.