Cách Sử dụng Công cụ dành cho Nhà phát triển Trình duyệt Web

2024 Tác giả: Abigail Brown | [email protected]. Sửa đổi lần cuối: 2023-12-17 07:05

Ngoài việc 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à các chuyên gia đảm bảo chất lượng, những người giúp xây dựng các ứng dụng và trang web mà những người dùng đó đang truy cập bằng cách tích hợp mạnh mẽ các công cụ ngay trên chính trình duyệt.

Đã qua rồi cái thời mà các công cụ lập trình và kiểm tra duy nhất được tìm thấy trong một 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 ngày nay cho phép bạn đi sâu hơn nhiều bằng cách thực hiện những việc như thực thi và gỡ lỗi các đ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 mạng theo thời gian thực khi ứng dụng hoặc trang của bạn tải để xác định các nút thắt cổ chai, 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 độ thử nghiệm, bạn có thể tái tạo cách một ứ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. Điều tuyệt vời nhất là bạn có thể làm tất cả những điều này mà không cần phải rời khỏi trình duyệt của mình!

Hướng dẫn bên dưới hướng dẫn bạn cách truy cập các công cụ dành cho nhà phát triển này trong một số trình duyệt web phổ biến.

Google Chrome

Các công cụ dành cho nhà phát triển 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ả những thiết bị chạy Android hoặc iOS và thực hiện một số chức năng hữu ích khác.

1. Chọn 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.

2. Khi menu thả xuống xuất hiện, di con trỏ chuột qua tùy chọn More tools.

   

3. Một menu phụ 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 thay cho mục menu này: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X (ALT (TÙY CHỌN) + LỆNH + I)

   

4. Giao diện Công cụ dành cho nhà phát triển Chrome bây giờ 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 bố cục được trình bày ở đây. Trung tâm chính của các công cụ dành cho nhà phát triển, thường nằm ở phía dưới cùng hoặc bên tay phải của màn hình, chứa các tab sau.

5. 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 Performancetab.

   • Memory: Theo dõi và ghi lại việc sử dụng bộ nhớ trên một trang web. Bạn có thể thấy JavaScript trên trang web của mình nặng như thế nào.
   • Security: Đá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.
   • Application: Kiểm tra các tài nguyên đang được ứng dụng web sử dụng. Nhận thông tin chi tiết đầy đủ về những gì đang được sử dụng.
   • Audits: 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.

   

6. Chế độ thiết bịcho phép bạn xem trang đang hoạt động trong một trình mô phỏng. Trang này hiển thị trang gần như chính xác như nó sẽ xuất hiện trên một trong hơn một chục thiết bị, bao gồm cả một số thiết bị Android nổi tiếng và các mẫu iOS như iPad, iPhone và Samsung Galaxy. Bạn cũng được cung cấp khả năng mô phỏng độ 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 mình.

   Để bật và tắt Chế độ thiết bị, hãy chọn biểu tượng điện thoại di độngnằm ngay bên trái của Tab phần tử.

   

7. Bạn cũng có thể tùy chỉnh giao diện của các công cụ dành cho nhà phát triển của mình bằng cách trước tiên chọn nút menu được biểu thị bằng ba dấu chấm được đặt theo chiều dọcvà nằm ở ngoài cùng bên phải của các tab nói trên.

   Từ trong menu thả xuống này, bạn có thể định vị lại vị trí của đế, 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ư trình kiểm tra thiết bị. Bạn sẽ thấy rằng bản thân giao diện công cụ dành cho nhà phát triển có khả năng tùy chỉnh cao thông qua các cài đặt có trong phần này.

   

Mozilla Firefox

Phần dành cho nhà phát triển web 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à bảng mắt nhắm mục tiêu pixel.

1. Chọn menu chính của Firefox, được biểu thị bằng ba đường ngangvà nằm ở góc trên bên phải của cửa sổ trình duyệt.

2. Khi menu thả xuống xuất hiện, hãy chọn Nhà phát triển web.

   

3. Menu Web Developerbâ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.

   • Toggle Tools: 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 (OPTION) + COMMAND + I), Windows (CTRL + SHIFT + I)
   • Inspector: Cho phép bạn kiểm tra và / hoặc chỉnh sửa CSS và mã 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 (OPTION) + COMMAND + C), Windows (CTRL + SHIFT + C)
   • Bảng điều khiển Web: 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 lại một loạt dữ liệu đã ghi bao gồm cảnh báo bảo mật, yêu cầu mạng, thông báo CSS, v.v.. Phím tắt: Mac OS X (ALT (OPTION) + COMMAND + K), Windows (CTRL + SHIFT + K)
   • Debugger: JavaScript Debugger cho phép bạn xác định và sửa các lỗi bằng cách thiết lập các điểm ngắt, kiểm tra các nút DOM, các nguồn bên ngoài quyền anh đen và hơn thế nữa. Như trường hợp của 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 (OPTION) + COMMAND + S), Windows (CTRL + SHIFT + S)
   • Style Editor: Cho phép bạn tạo các 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ách các thay đổi của bạn hiển thị 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)
   • Performance: Cung cấp bảng phân tích chi tiết về hiệu suất mạng của trang đang hoạt động, dữ liệu tốc độ khung hình, thời gian và trạng thái thực thi JavaScript, nhấp nháy sơn, v.v. Phím tắt: Mac OS X, Windows (SHIFT + F5)
   • Mạng: Liệt kê từng yêu cầu mạng do trình duyệt khởi tạo cùng với phương thức, miền gốc, loại, kích thước và thời gian đã trôi qua tương ứng. Phím tắt: Mac OS X (ALT (OPTION) + COMMAND + Q), Windows (CTRL + SHIFT + Q)
   • Storage Inspector: Hãy xem bộ nhớ cache và cookie được lưu trữ bởi một trang web. Phím tắt: (SHIFT + F9)
   • 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 helpvà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 thiết bị thực chạy Firefox OS hoặc qua Firefox OS Simulator. Phím tắt: Mac OS X, Windows (SHIFT + F8)
   • Bảng đ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ả về là dành cho toàn bộ ứng dụng Firefox (bao gồm các tiện ích mở rộng và các chức năng cấp trình duyệt) chứ không phải chỉ cho 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 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 cả máy tính bảng và điện thoại thông minh. Phím tắt: Mac OS X (ALT (OPTION) + 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: 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ừ bên trong cửa sổ Firefox pop-out. Mở một tài liệu JavaScript tương tác cho phép bạn viết mã và kiểm tra nó trên một trang web. Phím tắt: (SHIFT + F4)
   • Service worker: Gỡ lỗi nhân viên dịch vụ ứng dụng web của bạn. Nhận thông tin chi tiết về hiệu suất và lỗi của chúng.
   • Nguồn Trang: Công cụ dành cho nhà phát triển dựa trên trình duyệt ban đầu, 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)
   • Nhận thêm Công cụ: Mở bộ sưu tập Hộp công cụ của Nhà phát triển Webtrên trang tiện ích bổ sung chính thức của Mozilla, có khoảng một tá tiện ích mở rộng phổ biến như trong vai Firebug và Greasemonkey.

   

Microsoft Edge / Internet Explorer

Thường được gọi là F12 Developer Tools, một sự tôn kính đối với phím tắt đã khởi chạy giao diện kể từ các phiên bản trước của Internet Explorer, bộ công cụ dành cho nhà phát triển trong IE11 và Microsoft Edge đã đi một chặng đường dài kể từ khi thành lập bằng cách cung cấp một nhóm màn hình, trình gỡ lỗi, trình mô phỏng và trình biên dịch nhanh chóng rất tiện dụng.

Microsoft không còn hỗ trợ Internet Explorer nữa và khuyên bạn nên cập nhật lên trình duyệt Edge mới hơn. Truy cập trang web của họ để tải xuống phiên bản mới nhất.

1. Chọn Tác vụ khác, được biểu thị bằng ba chấmvà nằm ở góc trên bên phải của cửa sổ trình duyệt.

   

2. Khi menu thả xuống xuất hiện, hãy chọn tùy chọn có nhãn Công cụ dành cho nhà phát triển.

   

3. 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ác công cụ sau có sẵn, 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.

   

   • DOM Explorer: 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ã nếu có. Phím tắt: (CTRL + 1)
   • Console: 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à thông báo tùy chỉnh thông qua một API tích hợp. Ngoài ra, cho phép bạn đưa mã vào một trang web đang hoạt động và sửa đổi các giá trị được chỉ định cho các biến riêng lẻ trong thời gian thực. Phím tắt: (CTRL + 2)
   • Debugger: Cho phép bạn đặt các điểm ngắt và gỡ lỗi mã của bạn trong khi nó thực thi, từng dòng một nếu cần. Phím tắt: (CTRL + 3)
   • Mạng: Liệt kê từng yêu cầu mạng do trình duyệt khởi tạo trong quá trình tải và thực thi trang, bao gồm chi tiết giao thức, loại nội dung, sử dụng băng thông, v.v. Phím tắt: (CTRL + 4)
   • Performance: Chi tiết tốc độ khung hình, 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. Phím tắt: (CTRL + 5)
   • Memory: Giúp bạn cô lập và sửa lỗi bộ nhớ tiềm ẩn bị rò rỉ 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. Phím tắt: (CTRL + 6)
   • Giả lập: Cho bạn biết trang đang 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. Nó 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 độ. Phím tắt: (CTRL + 7)

4. Để hiển thị Bảng điều khiển trong khi ở trong bất kỳ công cụ nào khác, hãy nhấn vào nút hình vuông có dấu ngoặc vuông 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.

   

5. Để gỡ 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, hãy chọn hai hình chữ nhật xếp tầnghoặ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 Mac)

Bộ công cụ dành cho nhà phát triển đ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 bảng điều khiển mạnh mẽ và các 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.

1. Chọn Safaritrong menu trình duyệt, nằm ở đầu màn hình của bạn. Khi menu thả xuống xuất hiện, hãy chọn Preferences. Bạn cũng có thể sử dụng phím tắt sau thay cho mục menu này: COMMAND + COMMA(,)

   

2. Giao diện

   Preferencescủa Safari giờ đây sẽ được hiển thị, phủ lên cửa sổ trình duyệt của bạn. Chọn biểu tượng Advanced, nằm ở ngoài cùng bên phải của tiêu đề.

   

3. Tùy chọn Nâng caobây giờ sẽ hiển thị. Ở cuối màn hình này là một tùy chọn có nhãn Hiển thị menu Phát triểntrong thanh menu, kèm theo một hộp kiểm. Nếu không có dấu kiểm nào được hiển thị trong hộp, hãy nhấp vào dấu kiểm đó một lần để đặt dấu kiểm ở đó.

   

4. Đóng giao diện Preferences.

5. Bây giờ bạn sẽ thấy một tùy chọn mới trong menu trình duyệt có tên Develop, nằm giữa Bookmarks và Window. Nhấp vào mục menu này. Một menu 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 trên 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 chục 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 tùy chỉnh của riêng bạn chuỗi.
   • Vào Chế độ Thiết kế Đáp ứng: Hiển thị trang hiện tại như nó sẽ xuất hiện trên các thiết bị khác nhau và ở các độ phân giải màn hình khác nhau.
   • Hiển thị Trình kiểm tra web: Khởi chạy giao diện chính cho các công cụ dành cho nhà phát triển 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: Phần tử, Mạng, Tài nguyên, Dòng thời gian, Trình gỡ lỗi, Bộ nhớ, Bảng điều khiển.
   • Hiển thị Bảng điều khiển Lỗi: Đồng thời 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, nơi hiển thị lỗi, cảnh báo và có thể tìm kiếm khác dữ liệu nhật ký.
   • 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 chức năng tương tự như tùy chọn Hiển thị Nguồn Trang.
   • Hiển thị Trình chỉnh sửa đoạn mã: Mở 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ó một cách nhanh chóng.
   • Show Extension Builder: Cung cấp khả năng tạo hoặc chỉnh sửa các tiện ích mở rộng Safari bằng 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ố cục và thông tin hiển thị cũng như thực thi JavaScript trong thời gian thực.
   • Empty Caches: Xóa toàn bộ bộ nhớ đệm hiện đang được lưu trữ trên ổ cứng của bạn.
   • Disable Caches: Ngăn Safari lưu vào 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.
   • Disable Styles: Bỏ qua các thuộc tính CSS khi một 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ài đặt chạy trong trình duyệt.
   • Tắt Hacks dành riêng cho trang web: Nếu Safari đã được sửa đổi để xử lý rõ ràng (các) vấn đề cụ thể đối với trang web đang hoạt động, tùy chọn này sẽ chặn những thay đổi đó để trang tải như nó sẽ có trước khi những sửa đổi này được giới thiệu.
   • Disable Local File Restrictions: Cho phép trình duyệt có quyền truy cập vào các 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 Hạn chế Nhiều Nguồn gốc: Những hạn chế này được đưa ra 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 bị vô hiệu hóa tạm thời 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, nó cung cấp khả năng nhập URL bằng javascript: được kết hợp trực tiếp vào thanh địa chỉ.
   • Coi 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 nhiều người coi là lỗi thời và dễ bị tấn công.