Cách bật ứng dụng Chrome DevTools để gỡ lỗi từ xa

Ứng dụng Chrome DevTools được tạo bởi Kenneth Auchenberg trong nỗ lực đưa devtools ra khỏi trình duyệt - trong trường hợp này là ra khỏi trình duyệt Chrome. Ứng dụng này được xây dựng dựa trên NW.js và có thể chạy trên Mac OS X cũng như trên Linux và Windows.

Có nhiều lý do khiến nhà sản xuất tạo ra điều này nhưng tầm nhìn của anh ta bao gồm mang đến cho các nhà phát triển sự tiện lợi của gỡ lỗi từ xa trên nhiều trình duyệt, tất cả từ cùng một nền tảng (ứng dụng). Ý tưởng sẽ mất một thời gian để nắm bắt và hiện thực hóa do nhiều lý do (và sức đề kháng, mà bạn có thể đọc trên blog của mình).

Chúng tôi sẽ xem sơ qua về Ứng dụng DevTools của Chrome và xem Google có gì để cung cấp cho các nhà phát triển.

Thêm thông tin về Hongkiat:

Bắt đầu với Chrome Developer Tools
5 (Thêm) Lời khuyên hữu ích dành cho nhà phát triển Chrome dành cho nhà phát triển
Cách tùy chỉnh chủ đề DevTools của Google Chrome

Cài đặt

Tải xuống Chrome-Devtools.app.zip và giải nén nó. Nhấp đúp chuột để chạy. Khởi động Trình duyệt Chrome của bạn và bật gỡ lỗi từ xa.

Để thực hiện việc này trên máy Mac, hãy mở thiết bị đầu cuối và chạy lệnh bên dưới:

sudo / Ứng dụng / Google \ Chrome.app/Contents/MacOS/Google \ Chrome -remote-debugging-port = 9222

Nếu bạn chạy windows, hãy mở Command Prompt và sử dụng lệnh này:

bắt đầu chrome.exe -remote-debugging-port = 9222

Cách sử dụng

Khi Chrome của bạn đã mở, với tính năng gỡ lỗi từ xa được bật, giờ đây bạn có thể duyệt đến bất kỳ trang web nào. Ví dụ, chúng tôi đã mở Hongkiat.com cho bài tập này. Tiếp theo, chúng tôi đi đến cửa sổ ứng dụng DevTools của Chrome và làm mới danh sách này (nút nằm ở phía dưới bên phải).

Bây giờ bạn sẽ thấy liên kết Hongkiat.com được liệt kê (như hiển thị bên dưới).

Hiện nay nhấp vào nút 'Đi'. Bạn sẽ được đưa đến một cửa sổ mới. Đó là nó. Bạn đã có ứng dụng Chrome DevTools và đang chạy. Những gì bạn sẽ thấy ở đây cũng giống như khi bạn "kiểm tra phần tử" trên trình duyệt Chrome.

Và từ đây, bạn có thể sử dụng ứng dụng DevTools của Chrome giống như sử dụng DevTools trên Chrome nguyên bản: bạn có thể kiểm tra phần tử DOM, gỡ lỗi JavaScript, hoạt động với Bảng điều khiển và hơn thế nữa.

Cái gì tiếp theo?

Ứng dụng này vẫn còn rất thử nghiệm. Nhưng hiện tại, ý tưởng rút DevTool ra khỏi Chrome cho phép các nhà phát triển coi ứng dụng này như một trình chỉnh sửa chức năng và hoạt động với các thời gian chạy khác như node.js và iOS. Để có nhiều khả năng hơn, bạn có thể kiểm tra lối suy nghĩ của Auchenberg tại đây.