Chrome Developer Tools là một bộ công cụ toàn diện dành cho các nhà phát triển web, được tích hợp trực tiếp vào trình duyệt Chrome. Những công cụ này cho phép bạn chỉnh sửa trang web trong thời gian thực, chẩn đoán sự cố nhanh hơn và xây dựng trang web tốt hơn nhanh hơn.
Tuy nhiên, ngay cả khi bạn không phải là nhà phát triển, bạn vẫn có thể sử dụng Chrome Developer Tools.
Các bài viết liên quan:
Chrome Developer Tools là gì?
Đây là những gì bạn sẽ thấy khi mở Chrome Developer Tools:
Một trang web chuẩn, nhưng với một bộ công cụ mới mở trong bảng điều khiển ở bên phải của trang.
Có ba tab ở đầu cửa sổ Chrome Developer Tools và sáu tab khác mà bạn có thể thấy bằng cách nhấp vào biểu tượng >> bên cạnh chúng.
Các tab là:
- Elements
- Console
- Source
- Network
- Application
- Security
- Memory
- Performance
- Audits
Không phải lúc nào chúng cũng ở theo thứ tự này — Chrome di chuyển chúng dựa trên thứ mà bạn đã mở sau cùng.
Xem thêm Website là gì
Theo mặc định, Chrome Developer Tools sẽ mở khi mở tab Element.
Tab Elements hiển thị cho bạn HTML được sử dụng để tạo trang bạn đang xem, cùng với bất kỳ CSS nội tuyến nào.
Tab Console hiển thị code JavaScript. Nó cung cấp cho bạn thông tin về các yếu tố tương tác trên một trang. Trong tab console, bạn có thể viết JavaScript để tương tác với trang web bạn đang xem và nó cũng cho phép bạn viết thông báo cho chính mình bằng JavaScript của các trang web bạn đang xây dựng, sau đó sẽ hiển thị trong tab console để cho biết rằng JS đã được thực thi .
Tab Source hiển thị cho bạn nơi lưu trữ tất cả các tệp được sử dụng để tạo trang web và cho phép bạn kiểm tra chúng.
Tab Network hiển thị cho bạn tất cả các tệp đang tải trong URL mà bạn đang xem.
Bạn nhận được sơ đồ thác nước và dữ liệu sâu về tất cả các mục được tải, bao gồm trình khởi tạo và thời gian tải phần tử đó.
Xem thêm Ứng dụng Chromium này là gì
Tab Application hiển thị cho bạn những gì có trong bộ nhớ trình duyệt của bạn: cơ sở dữ liệu trong web browser như Web SQL, bộ nhớ cục bộ, v.v. Nó cũng cung cấp cho bạn quyền kiểm soát chi tiết đối với cookie của bạn.
Security cung cấp cho bạn thông tin bảo mật cơ bản, cho phép bạn xem chứng chỉ HTTPS và trạng thái TLS của trang web.
Cuối cùng là Audit, tự động tạo báo cáo về chức năng và cấu trúc trang web để giúp nhà phát triển cải thiện hiệu suất.
Chrome Developer Tools được cập nhật với mỗi bản phát hành Chrome mới. Để đảm bảo chúng được cập nhật, hãy chuyển đến Thành phần bằng cách nhập chrome: // components vào thanh địa chỉ của bạn, chọn “Khôi phục” và kiểm tra các bản cập nhật.
Quan trọng: Bạn không thể thay đổi mã trên trang web bằng Chrome Developer Tools. Bạn cần quyền truy cập vào phần phụ trợ của trang web cho việc đó. Chỉ mã mà web browser của bạn sử dụng để hiển thị trang web được thay đổi. Vì vậy, ngay cả khi bạn là người mới bắt đầu hoàn toàn, bạn có thể làm bất cứ điều gì bạn thích với Chrome Developer Tools mà không có rủi ro thực sự. Đóng cửa sổ, quay lại trang web và mọi thứ vẫn như trước.
Hãy bắt đầu sử dụng Chrome Developer Tools.
Xem thêm Làm thế nào để trở thành một developer Python?
Cách mở Chrome Developer Tools
Bạn có thể mở Chrome Developer Tools bằng phím tắt hoặc thông qua menu Chrome.
Các phím tắt là:
- Mac OS: CMD + Shift + J hoặc CMD + Shift + C
- Linux, Chromebook và Windows: Ctrl + Shift + J
Từ menu Chrome:
Mở menu Chrome và đi tới “More Tools” > “Developer Tools.”
Cuối cùng, bạn có thể nhấp chuột phải (Windows) hoặc Ctrl-nhấp vào bất kỳ thứ gì (Mac) trên trang web và chọn “Inspect Element” để mở Chrome Developer Tools.
Bảng điều khiển Chrome Developer Tools sẽ mở ra trên bất kỳ trang web nào bạn đang truy cập. Bạn cần mở lại chúng cho mỗi cửa sổ Chrome mới, nhưng bạn có thể điều hướng giữa các trang web đang mở chúng.
Còn trên điện thoại di động thì sao?
Mở Chrome Developer Tools trên thiết bị di động
Bạn không thể truy cập Chrome Developer Tools trực tiếp trên Android. Thay vào đó, bạn sẽ cần sử dụng Remote Debugging. Quy trình cơ bản hoạt động như sau:
- Kết nối thiết bị Android
- Mở Chrome Developer Tools và đi tới “More Tools” > “Remote Devices”
- Cho phép truy cập từ xa trên thiết bị Android của bạn
- Dường như không có cách nào để thực hiện điều này trên các thiết bị iOS.
Sử dụng Chrome Developer Tools cho người mới bắt đầu
Chỉ vì bạn không phải là nhà phát triển không có nghĩa là Chrome Developer Tools không dành cho bạn. Dưới đây là năm cách bạn có thể làm cho cuộc sống của mình dễ dàng hơn với Chrome Developer Tools.
Hầu hết chúng sẽ sử dụng tab Elements. Dưới đây là hướng dẫn nhanh về điều đó:
Phần trên cùng hiển thị HTML cho trang web.
Phần dưới cùng bên trái hiển thị các kiểu CSS được áp dụng cho trang đó.
Dưới cùng bên phải hiển thị bố cục CSS một cách trực quan để bạn biết mình đang xem gì.
Kiểm tra html tag
Một trong những yếu tố quan trọng nhất của SEO onpage là thẻ h1 và h2 đơn giản. Tìm hiểu kỹ càng và bạn sẽ thấy nhiều người (bao gồm cả những người nên biết rõ hơn) không hiểu đúng nội dung này.
Khi bạn đã xem các trang trong đó h1 là hình ảnh chưa được tối ưu hóa hoặc các trang có bốn thẻ h1, bạn bắt đầu đánh giá cao tính cấp bách của tình huống. Và các công cụ như Screaming Frog rất tuyệt vời nhưng không phải lúc nào chúng cũng chính xác 100%. Tốt nhất bạn nên kiểm tra bằng tay. Nó cũng rất dễ dàng.
Mở một trang, sau đó mở Developer Tools. Trong tab Phần tử, nhấn CMD + F hoặc Ctrl-F để tìm kiếm và tìm kiếm “h1” để xem (các) thẻ trên trang của bạn:
Chỉnh sửa CSS
Chrome Developer Tools cho phép bạn thay đổi CSS của một trang trực tiếp trong web browser của mình. Bạn có thể dùng thử các kiểu kết hợp màu sắc, phông chữ — bất kỳ thứ gì được điều chỉnh bởi CSS. Bạn không cần phải lộn xộn với biểu định kiểu và bạn thường không phải viết một ký tự mã nào.
Giả sử chúng tôi muốn xem trang chủ sẽ như thế nào với dòng chữ màu đỏ.
Tôi mở trang, sau đó mở Chrome Developer Tools. Nhấn Ctrl hoặc nhấp chuột phải vào phần tử bạn muốn thay đổi trên trang web. Trong tab Phần tử, tôi tìm thấy màu cho phần tử ở bảng điều khiển phía dưới bên trái:
Nhấp vào hộp màu và tôi có thể chỉ cần nhấp vào một màu khác trong Bộ chọn màu của Chrome (thêm về điều này sau). Văn bản thay đổi ngay lập tức.
Có lẽ sẽ để lại màu đen đó.
Xem họ đã xây dựng trang web bằng gì
Khi bạn truy cập một trang web, không phải lúc nào bạn cũng dễ dàng biết được CMS nào được sử dụng để xây dựng trang web đó. Nhưng bạn có thể tìm hiểu dễ dàng với Chrome Developer Tools.
Mở trang web và Chrome Developer Tools, sau đó nhìn vào phía trên bên phải của bảng Kiểu trong tab Element:
Nhấp chuột phải hoặc nhấp Ctrl vào liên kết bắt đầu “style.css” và chọn “Sao chép địa chỉ liên kết”. Dán liên kết vào một tab mới và nó sẽ cho bạn biết CDN và chủ đề được sử dụng để xây dựng trang web — trong trường hợp này, nó được tạo bằng Divi trên WordPress.
Thiết kế web
Nếu bạn đang làm việc copy cho một trang web mới, bạn có thể truy cập một trang đã tồn tại và viết trực tiếp vào đó bằng Chrome Developer Tools. Vì vậy, nếu bố cục hoặc kích thước là một vấn đề, bạn có thể kiểm tra xem bản sao của mình có còn tốt trong môi trường mà nó sẽ được hiển thị hay không.
Đây là cách thực hiện.
Mở Chrome Developer Tools trên một trang web — bạn có thể thực hiện việc này với bất kỳ trang web nào.
Khi mở tab Thành phần, nhấp chuột phải vào một đoạn văn bản trên trang. Bạn sẽ thấy HTML có liên quan được đánh dấu:
Tìm ba dấu chấm dọc ở phía bên trái của HTML cho phần tử đó, nhấp vào chúng và chọn “Edit as html”.
Ngay cả khi bạn không biết HTML từ DMV, bạn vẫn có thể làm điều này: tất cả những gì bạn đang tìm kiếm là văn bản bạn đã nhấp vào, bên trong tất cả mã. Tất cả HTML đều được mã hóa màu, trong khi văn bản có màu đen. Nhấp vào nó và bạn có thể nhập bất cứ thứ gì bạn thích:
Nhấp vào nền để thoát HTML và các thay đổi của bạn sẽ xuất hiện trong chính trang:
Vâng, nó trông đẹp hơn trước đây. Nhưng bằng cách này, bạn có thể tìm ra chắc chắn và điều chỉnh bản sao của mình một cách chính xác theo bố cục và thiết kế mà nó sẽ được sử dụng.
Kiểm tra giao diện điện thoại di động
… Và trên bất kỳ khung nhìn nào khác mà bạn muốn. Chrome Developer Tools cho phép bạn quản lý giao diện khung nhìn bằng cách sử dụng cả kích thước đã chọn trước và chia tỷ lệ tự do.
Mở Chrome Developer Tools và nhìn vào thanh menu trên cùng, nơi Các phần tử, Bảng điều khiển và Nguồn được hiển thị. Bạn sẽ thấy hai biểu tượng ở ngoài cùng bên trái của thanh đó; thứ trông giống như một chồng thiết bị di động là thứ mà chúng tôi đang theo đuổi.
Nhấp vào đó và bạn sẽ thấy trang web bạn đang hiển thị như thể bạn là khách truy cập trên thiết bị di động:
Điều đó thật tuyệt, nhưng bạn có thể làm được nhiều việc hơn với những điều khiển này. Biểu tượng cho phép bạn chuyển đổi giữa các phiên bản di động và máy tính để bàn của trang web. Và các nút điều khiển ở đầu màn hình cho phép bạn điều chỉnh kích thước khung nhìn.
Sử dụng menu thả xuống này để xem trang web trông như thế nào trên các thiết bị khác nhau:
- Tự đặt kích thước khung nhìn:
- công cụ nhà phát triển kiểm soát kích thước cửa sổ xem
Và thậm chí bắt chước các chất lượng kết nối khác nhau khi bạn điều hướng trang web:
Bạn có thể làm tất cả những điều đó và hơn thế nữa từ thanh menu ở trên cùng.
Còn nếu bạn muốn mở rộng việc sử dụng Chrome Developer Tools nhiều hơn một chút thì sao?
Sử dụng nâng cao cho Chrome Developer Tools
Chúng tôi sẽ không đi sâu vào cách các nhà phát triển sử dụng Chrome Developer Tools — đây là hướng dẫn dành cho người mới bắt đầu. Nhưng đây là một số điều bạn có thể sử dụng Chrome Developer Tools khi bạn cảm thấy tự tin hơn một chút.
Để đặt tùy chọn của bạn cho Chrome Developer Tools, hãy quản lý chúng thông qua Cài đặt Chrome. Mở menu Chrome, sau đó đi tới Cài đặt hoặc nhập chrome: // settings / vào thanh địa chỉ của bạn.
Nếu bạn biết cách sử dụng Chrome Developer Tools và các mẹo này vẫn khá cơ bản, thì có một bộ công cụ đang thử nghiệm hoàn toàn mới có sẵn thông qua Chrome Flags. Nhập chrome: // flags # enable-devtools-Experiments vào thanh địa chỉ của bạn và bạn sẽ có thể tùy chỉnh Chrome Developer Tools.
Xác định các vấn đề về tốc độ tải
Tốc độ tải trang web là một vấn đề lớn. Các trang web chậm giết chết chuyển đổi và số lượng khách truy cập, và bởi vì Google biết điều này, nó sẽ phạt các trang web tải chậm. Vì vậy, nếu trang web của bạn mất 14 giây để tải, đó không tốt cho SEO.
Chrome Developer Tools sẽ cho bạn biết một rất nhiều về cách thức và lý do tại sao trang web của bạn tải chậm.
Mở trang web của bạn, sau đó mở Chrome Developer Tools và chuyển đến Network. Nếu bạn thấy thông báo “Perform a request”, hãy tải lại trang.
Giờ đây, bạn có thể nhìn xuống danh sách các sự kiện và tài nguyên và xem những gì đang cần thời gian để tải.
Trong trường hợp này, có 39 yêu cầu và chỉ có 1,2 MB tài nguyên, một con số nhỏ. So sánh điều đó với trang web này:
246 yêu cầu, 4,6 MB tài nguyên. Sự khác biệt lớn nhưng nó tạo ra sự khác biệt nào cho người dùng?
Câu trả lời cho điều đó nằm ở cuối bảng. Tìm ba số cuối cùng: Finish, DOMContentLoaded, và Load.
DOMContentLoad cho bạn biết mất bao lâu để tải HTML cho trang trước bất kỳ thứ gì khác — CSS, JavaScript, bất kỳ thứ gì khác trên đó. Chỉ chênh lệch 0,29 giây giữa hai trang web này trong thời gian DOMContentLoad. Đừng tìm kiếm sự khác biệt lớn ở đây.
Load cho chúng tôi biết khi nào trang được tải đầy đủ; Kết thúc cho chúng tôi biết khi nào tất cả các phần tử và mã trong trang được hoàn tất, bao gồm cả nội dung không đồng bộ. Đó là rất nhiều nội dung đang diễn ra trong trang thứ hai, chậm hơn được hiển thị ở đây. Bạn có thể nhìn vào bảng và thấy rất nhiều tập lệnh cho Amazon và các trang web của bên thứ ba khác đang chạy.
Những gì bạn cũng có thể làm là kiểm tra các nghi ngờ thông thường: CSS nội tuyến, hình ảnh, rất nhiều yêu cầu và một loạt JS và Flash. Tất cả đều hiển thị trong sơ đồ thác nước.
Bắt các plugin không hoạt động
Gần như mọi trang web đều dựa vào một số loại plugin của bên thứ ba. Cho dù đó là mã theo dõi từ HotJar hay Crazy Egg, công cụ biểu mẫu hoặc cửa sổ bật lên hay các tiện ích bổ sung trò chuyện như Intercom hoặc Zendesk Chat, thì điều đó rất quan trọng đối với hoạt động kinh doanh mà trang web phải thực hiện. Khi sự cố xảy ra, không phải lúc nào cũng dễ dàng biết được điều đó đang xảy ra, đừng bận tâm về cách thức và lý do.
Có một cách dễ dàng để nắm bắt nó trong Chrome Developer Tools.
Mở trang web bạn muốn kiểm tra, mở Chrome Developer Tools và chuyển đến tab Bảng điều khiển.
Các lỗi sẽ được gắn cờ màu đỏ:
Nếu bạn thấy một trang chứa đầy “BLOCKED_BY_CLIENT” thì có thể là do bạn đang chạy trình chặn quảng cáo.
Mặt khác, công ty này đã không đặt mã cho công cụ theo dõi vào trang web của họ một cách chính xác:
Các lỗi “Uncaught Reference” đó là mã theo dõi UNBXD không hoạt động. Lý do là vì “có một biến không tồn tại được tham chiếu ở đâu đó. Biến này cần được khai báo hoặc bạn cần đảm bảo rằng biến này có sẵn trong tập lệnh hoặc phạm vi hiện tại của bạn, ”theo hướng dẫn JavaScript của Mozilla.
Ngay cả khi bạn không biết điều đó có nghĩa là gì, bạn vẫn biết rằng công cụ này không hoạt động. Đó là thông tin quan trọng mà nhóm phát triển, bộ phận tiếp thị và nhiều người khác tại công ty của bạn sẽ muốn biết.
Xem công nghệ mà một trang web đang sử dụng
Bạn đang bán công nghệ, nhưng bạn không biết liệu doanh nghiệp này có phải là khách hàng tiềm năng hay không. Một số thông tin công nghệ sẽ rất hay. Hãy mở Chrome Developer Tools và nhận một số.
Với Chrome Developer Tools mở trong tab Thành phần, hãy tìm thẻ <head> trong HTML và nhấp vào thẻ đó để mở rộng phần.
Bạn sẽ thấy tất cả JavaScript theo dõi cho trang web:
Facebook, Trình quản lý thẻ, Google Analytics… nếu họ đang sử dụng bất kỳ thứ gì chuyên biệt hơn cũng sẽ hiển thị ở đây.
Logo Grab
Bạn đang xây dựng một nội dung khác và bạn cần logo, nhưng bạn không thể tìm thấy bộ tài liệu báo chí của trang web. Để làm gì?
Di chuột qua biểu trưng trên trang chủ, nhấp chuột phải hoặc nhấp vào Ctrl và chọn “Kiểm tra”. Các Chrome Developer Tools sẽ mở ra và mã cho biểu trưng sẽ được đánh dấu trong HTML hiển thị trên tab Thành phần. Tìm trong mã để biết URL đầy đủ bắt đầu https: //. Sao chép và dán nó vào một tab trình duyệt mới và bạn có biểu trưng, thường là một PNG khá lớn.
Cách thay thế là mở Chrome Developer Tools và chuyển đến tab Mạng, sau đó tìm hình ảnh bạn muốn. Bạn không phải tìm kiếm tất cả các phần tử trên trang theo cách thủ công. Bạn có thể lọc theo loại hình ảnh trong bảng điều khiển này:
Khi bạn tìm thấy cái mà bạn đang tìm kiếm, nó sẽ được hiển thị trong bảng Xem trước cùng với.
Nhấp chuột phải / Ctrl + nhấp vào bản xem trước hình ảnh để có tùy chọn lưu hình ảnh hoặc tải xuống hoặc lưu hình ảnh dưới dạng URI dữ liệu.
Lần duy nhất điều này không hoạt động là khi biểu trưng là SVG thực sự được vẽ trên trang. Đó là khi bạn sẽ phải chụp ảnh màn hình hoặc tìm kiếm hình ảnh trên Google.
Bộ chọn màu
Chrome có một công cụ chọn màu tích hợp mạnh mẽ đáng ngạc nhiên. Bạn có thể nhận mã màu hex, RGBA hoặc HSLA cho bất kỳ phần tử nào của trang web mà bạn đang xem, từ biểu trưng, văn bản đến màu nền.
Mở Chrome Developer Tools và ở trong tab Thành phần. Nhìn vào nửa dưới của tab, trong tab Kiểu, để biết phần tử CSS có chất lượng màu:
Cho đến nay, rất tốt: bạn có thể xem thông tin về màu sắc cho phần tử đó.
Nhấp vào phần tử CSS và bạn sẽ mở bộ chọn màu Chrome đầy đủ tính năng. Bạn phải nhấp vào hộp nhỏ
thực sự hiển thị màu sắc một cách trực quan chứ không phải văn bản.
Bạn sẽ thấy điều này:
Sử dụng ống nhỏ mắt để phát hiện màu của bất kỳ phần tử nào trên trang, sau đó sao chép mã màu hex, RGBA hoặc HSLA từ bên dưới.
