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

Chrome là một trình duyệt web đã quá nổi tiếng trên thế giới của Google. Trong Chrome có Chrome DevTools hổ trợ khá tốt cho Coder. Nhưng nếu bạn không biết Code vẫn có thể tự áp dụng một số thủ thuật hay với Chrome DevTools.

Sau đây mình sẽ giới thiệu và hướng dẫn luôn cho các bạn 3 mẹo sử dụng Chrome DevTools khi bạn không biết code nhé, và tất nhiên là khi bạn không biết code thì mình không thể hướng dẫn bạn sử dụng tools như một coder lập trình web được mà mình chỉ hướng dẫn một số mẹo không liên quan tới code nhưng lại rất có ích đối với một người dùng bình thường.

Đầu tiên nhấn F12 hoặc click chuột trái chọn kiểm tra để bật developer tools.

Chỉnh sửa dữ liệu trên Web để troll bạn bè

Mình muốn nhắc các bạn là cái này chỉ thay đổi dữ liệu hiển thị của trang web trên máy tính của bạn chứ không phải thay đổi trên tất cả các máy tính đang truy cập website. Chrome DevTools giúp bạn chỉnh sửa nội dung Websiste người khá khá đơn giản.

Bước 1: mình sẽ làm mẫu bằng một bài báo của vnexpress.

Sau đó click vào ô như hình mình đánh dấu số 1, chọn một hình ảnh ở số 2, click chuột trái vào số 3 và chọn Edit as HTML

Bước 2: Xóa link của bức ảnh đó, link có hình màu vàng mình đánh dấu bên dưới.

Rồi chèn link của hình khác mà bạn muốn nó xuất hiện trên trang web + Enter là xong.

Chọn tab console, ở phía dưới các bạn nhập dòng code document.designMode ='on'. Sau đó qua phía trang web để chỉnh sửa

Những trò này các bạn có thể làm trên facebook để troll bạn bè của mình. Ví dụ như cho bạn bè mình lên báo chẳng hạn

Chú ý: nếu các bạn load lại trang thì mọi thứ các bạn chỉnh sửa sẽ biến mất. Cách chỉnh sửa văn bản ở trên cũng có thể chỉnh sửa tin nhắn trong messenger. Nên ai đó chụp tin nhắn lại thì bạn đừng tin nhé, có rất nhiều vụ lừa đảo đã xảy ra vì nó rồi.

Chụp ảnh màn hình của Website bằng Chrome DevTools

Chrome DevTools hổ trợ tính năng chụp ảnh màn hình trên Chrome khá hay. Chắc sẽ có một lúc mà bạn cần hình ảnh từ một website nào đó để làm việc hay giải trí và bạn thường sẽ chọn phần mềm bên thứ ba để làm việc đó, nhưng từ bây giờ sau khi đọc bài viết này thì hãy tận dụng ngay công cụ có sẵn trên chrome luôn nhé.

Bước 1: chọn vào dấu ba chấm + Run command.

Bước 2: nhập screenshot vào ô tìm kiếm ở hàng đầu.

Nó sẽ hiện bốn kết quả như hình, các bạn có thể chọn một trong bốn cách chụp để có ảnh phù hợp nhất

• Capture area screenshot: bạn có thể tự chọn vùng chụp trên Chrome.
• Capture full size screenshot: chụp toàn bộ trang web và chỉ có ích khi trang web ấy hiển thị văn bản hoặc hình ảnh, còn nếu trang web ấy là một ứng dụng web thì nó chỉ chụp phần hiển thị thôi.
• Capture node screenshot: chụp hình theo phần tử [code] của Web. Ví dụ chụp hình hiển thị của đoạn

  abcxyz

• Capture screenshot: chỉ muốn chụp ảnh màn hình của khu vực hiển thị hiện tại.

Sau đó nó sẽ tự tải về máy nên không cần thao tác gì thêm.

Nếu bạn thấy cách này rườm rà có thể dùng TinyTake để dễ chụp ảnh màn hình hơn.

Tải file nhạc, âm thanh của website

Chrome DevTools giúp hiển thị các file âm thanh đang được load về khi nghe trực tuyến. Bạn có thể tận dụng tính năng này để tải các file nhạc, âm thanh từ các website khác.

Bước 1: Vào trang web bạn muốn tải file, mình sẽ làm mẫu ở //mp3.zing.vn/

• Mở Tab Network -> Media + click vào nghe nhạc để load file.
• Sau đó nó sẽ hiện tên file ở mục name và kích cỡ của file ở Size.
• Bạn double click vào tên file thì nó sẽ chuyển đến trang tải.

Bạn có thể tải nhạc từ mp3 zinghoặc nhaccuatui hay bất cứ trang nghe nhạc online nào khác. Việc này giúp bạn tiết kiệm được ít tiền thay vì phải mua acc VIP. Mẹo này cũng rất có ích và bổ trợ rất nhiều cho việc học ngoại ngữ của các bạn vì nó có thể tải những file âm thanh từ Google Translate.

Ở một vài trang web tin tức hay nhaccuatui thì bạn có thể dùng cách này để tải video luôn. Thật tiếc khi cách này không thể tải video từ 2 MXH lớn hiện nay là youtube và facebook. Mình đã thử khá nhiều lần nhưng vẫn không tải được. Và nếu các bạn cần những video từ 2 MXH này thì mình khuyên nên tải 2 này trình duyệt về dùng Cốc Cốc, Chim Lạc [của BKAV]/

Như vậy mình đã giới thiệu và hướng dẫn xong cho các bạn 3 mẹo hay để sử dụng Chrome DevTools. Những mẹo trên đều là tâm huyết của mình sau bao năm dùng chrome đấy. Mình thấy cái có ích nhất là tải file âm thanh từ Google Translate vì nó có thể giúp rất nhiều bạn học tiếng anh chủ động.

Cộng tác viên: Trương Thụy Quang Nhật