Đầu tiên, bạn phải chắc chắn rằng máy tính của mình đã được cài đặt Google Chrome, nếu chưa có thì tải tại địa chỉ http://tinyurl.com/onoeylt. Sau đó, mở trang web cần thao tác bằng Chrome rồi bấm tổ hợp phím Ctrl+Shift-I (đối với Windows) hoặc Cmd+Shift-I (đối với MAC) để sử dụng DT.
Mặc định công cụ này sẽ hiển thị nằm ngang ở khung nhỏ bên dưới, tuy nhiên nếu muốn mở nó trong một cửa sổ riêng biệt, hay cho nó hiển thị ở khung bên phải, bạn bấm vào biểu tượng ô cửa màn hình vài lần.
(Xem video hướng dẫn bằng tiếng Việt tại địa chỉ: http://youtu.be/F8BvV9GMXIo).
Sắp xếp lại các văn bản, hình ảnh trên cùng một trang
Với DT, bạn dễ dàng thay đổi thứ tự, vị trí của các thành phần trên trang web bằng cách kéo thả rất đơn giản. Đầu tiên, bạn bấm vào biểu tượng hình chiếc kính lúp ở thanh menu bên dưới, rồi rê chuột qua các thành phần cần chỉnh sửa như văn bản, hình ảnh hoặc các danh sách có trong trang web... để nó hiển thị mã HTML tương ứng trong DT. Sau đó, trong khung DT, bạn bấm chuột vào các đoạn mã tương ứng đó rồi di chuyển nó đến một vị trí thích hợp, hoặc chỉnh sửa các thành phần bên trong sao cho vừa ý.
Thay đổi màu sắc hiển thị
Các trang web thường sử dụng hệ thập lục phân (hexadecimal) để tạo màu sắc cho các văn bản, đặc biệt, văn bản màu đen trên nền trắng đang được sử dụng phổ biến hiện nay. Tuy nhiên, có đôi lúc bạn muốn đổi màu nền hay màu chữ để đọc dễ hơn vào ban đêm, hoặc muốn thử nghiệm xem màu nào là phù hợp với mình khi thiết kế web một trang web cá nhân...
Rất đơn giản, bạn chỉ cần chọn mục body ở thanh menu bên dưới cùng và chỉnh sửa lại giá trị ở thuộc tính Background - color (bên trong mục Matched CSS Rules). Bạn có thể sử dụng định dạng màu ở hệ thập lục phân (ví dụ: #ffffff), hoặc chỉ cần viết tên tiếng Anh như Yellow (vàng), Red (đỏ)... Chỉ cần gõ ký tự đầu tiên, Chrome sẽ tự động hiển thị các màu sắc tương ứng cho bạn chọn.
Để dễ dàng hơn, bạn chỉ cần chọn vào ô màu nhỏ ở ngay bên cạnh. Lưu ý, nếu thuộc tính Background - color không có sẵn, bạn có thể thêm vào. Ngoài việc thay đổi màu nền, bạn có thể thay đổi font chữ, kích cỡ... và nhiều thứ khác nữa.
Xem mật khẩu ẩn
Chrome có thể tự động điền đầy đủ mật khẩu trong phần đăng nhập của một trang web, nếu trước đó bạn đã lưu lại mật khẩu này, nhưng bạn không thể nào xem được mật khẩu vì nó nằm ẩn sau một dãy ký tự hình sao (*), tuy nhiên, bạn có thể sử dụng DT thay đổi giá trị Password lại thành Text để xem chúng.
Để thực hiện việc này, tại phần đăng nhập của một trang web, bạn mở DT thông qua tổ hợp phím tắt Ctrl+Shift+I, chọn vào biểu tượng hình chiếc kính lúp rồi bấm vào khung nhập mật khẩu (lưu ý, lúc này mật khẩu đã được Chrome tự động điền đầy đủ). Sau đó, tại thuộc tính Type của thẻ Input, bạn thay đổi giá trị Password thành Text rồi bấm Enter. Lúc này bạn thấy mật khẩu sẽ được hiển thị rõ ràng và đầy đủ.
Chỉnh sửa trang web trực tiếp
Việc chỉnh sửa các trang web trên trình duyệt là điều không thể, nhưng với một mẹo nhỏ, bạn có thể thực hiện việc này như khi đang thao tác với một trình xử lý. Trong giao diện của DT, hãy chuyển sang thẻ Console nằm ở cuối cùng.
Tại dấu nhắc lệnh, bạn gõ document.body. contentEditable = true rồi bấm Enter, nếu xuất hiện thông báo True tức là đã thành công.
Bây giờ, bạn đã có thể sửa được dữ liệu trực tiếp ngay trên trình duyệt mà không gặp bất kỳ một rắc rối nào.
Sư ãdụ ng DT như mộ tcông cu åtính toá n
Cũng trong thẻ Console, bạn có thể nhập vào các phép tính đơn giản như cộng, trừ, nhân, chia, tính căn, tính số ngày... hay sử dụng biến đặc biệt là $ để tính các phép tính dài. Ví dụ, bạn có thể nhập 2 + 2, (100 – 32)*5/9 và bấm Enter, Chrome sẽ tự động tính toán và cung cấp kết quả cho bạn.
Để tính căn bậc 2, bạn nhập vào từ khóa Math. sqrt( ) và cho số cần tính vào trong ngoặc đơn. Tương tự như vậy, bạn có thể lấy ngày giờ hiện tại bằng lệnh new Date, tính số giây giữa 2 mốc thời gian theo ví dụ sau như:
new Date (“July 29, 2013”) - new Date (“July 28, 2013”), kết quả sẽ trả về thời gian từ ngày 28 đến 29 tháng 7, lưu ý bạn phải bỏ đi ba số 000 ở cuối cùng để phép tính chính xác hơn.
Bên cạnh đó, bạn có thể tạo ra một biến tùy ý và gán giá trị cho nó. Chẳng hạn như ở đây người viết tạo ra một biến có tên vanban = “
Ngoài ra, còn rất nhiều thuộc tính khác mà bạn có thể tự mình khám phá thêm, chẳng hạn như để biết được chiều dài của cửa sổ đang mở thì sử dụng câu lệnh window.innerWidth....
Lưu ý, để sử dụng tính năng này trên các trình duyệt khác, bạn thực hiện như sau: đối với Firefox, sử dụng tổ hợp phím tắt Ctrl+Shift+K, đối với Internet Explorer bạn bấm F12 rồi chuyển sang thẻ Console.
Trích xuất thông tin từ trang web dễ dàng
Việc trích xuất dữ liệu như các liên kết trang hay hình ảnh trong DT, sẽ trở nên dễ dàng hơn bao giờ hết chỉ với một vài dòng lệnh đơn giản. Ví dụ ở đây người viết sẽ thực hiện trích xuất toàn bộ các liên kết ẩn (chẳng hạn như ẩn dưới dòng chữ thường gặp “Download tại đây”) trên một trang web, để bạn dễ thống kê và truy xuất hơn. Đầu tiên, bạn nhập vào dòng lệnh sau:
Lienket = $$ (‘a’)
Với Lienket là một biến có thể đặt tên bất kỳ, và a là thẻ trong HTML, dùng để đại diện cho các liên kết. Sau khi nhập xong, bạn bấm Enter, nếu đúng, nó sẽ trả về số lượng các liên kết tìm được.
Sau đó, nhập vào dòng lệnh for (i in Lienket) console. log(Lienket[i].href), với href là thuộc tính để gán giá trị là liên kết trang trong HTML. Lúc này, toàn bộ các liên kết trang sẽ được hiển thị ngay bên dưới, bạn có thể sao chép hoặc lưu lại một cách dễ dàng.
Tương tự như vậy, nếu truy cập vào một trang web chia sẻ ảnh, và muốn tải hoặc sao chép link của nhiều hình ảnh cùng một lúc, bạn thực hiện như ví dụ sau đây:
Hinhanh = $$(‘img’)
Trong đó, Hinhanh cũng là một biến có thể đặt tên tùy thích, và img là thẻ trong HTML dùng để chứa hình ảnh.
Tiếp theo, bạn lại sử dụng lệnh for (i in Hinhanh) console.log(Hinhanh[i].src), với src là thuộc tính đại diện cho nguồn của hình ảnh. Lúc này, bạn sẽ thấy toàn bộ liên kết của hình có trên trang sẽ được liệt kê.
Thiết lập vị trí địa lý ảo hoặc hiển thị trang web dưới cái nhìn khác
Một số trang web có thể sẽ theo dõi vị trí địa lý của bạn, khi bạn truy cập vào chúng. Với DT, bạn có thể “giả mạo” vị trí một cách dễ dàng. Để làm được việc này, trong hộp thoại DT, bạn bấm vào biểu tượng bánh xe răng ở góc phải bên dưới, đánh dấu chọn vào ô Override Geolocation, rồi thiết lập độ vĩ bắc và độ kinh đông tương ứng trong 2 ô Lat
và Lon (bạn có thể sử dụng Wolfram Alpha hay Google Maps để tìm được 2 thông số này, nếu không rành thì bạn chỉ cần đánh dấu vào ô Emulate position unavailable).
Để xem trang web dưới một cái nhìn khác, bạn đánh dấu vào mục Use Agent, chọn tên các trình duyệt hoặc thiết bị cần sử dụng như iPhone, IE9... Cuối cùng, nếu muốn trang web hiển thị đơn giản hơn, bạn chỉ cần kích hoạt tùy chọn Emulate CSS media.
Cuối cùng, nếu muốn nắm vững cách sử dụng Chrome Developer Tools, bạn có thể tham khảo một số trang hướng dẫn sau đây:
- Codeschool.com (http:// discover-devtools.codeschool. com/): do Paul Ailen, một nhân viên của Google Chrome hướng dẫn.
- Developer.google.com (http:// tinyurl.com/7uyvw9c): trang web có rất nhiều tài liệu chính thức và thủ thuật giúp bạn làm chủ DT.
- Vimeo.com (http://vimeo. com/53073654): video của Patrick Dubroy, nhân viên của Google Chrome sẽ hướng dẫn sử dụng một số tính năng ít được biết đến của DT.
- YouTube.com (ht tp:// www.youtube.com/watch?v= BaneWEqNcpE): Ilya Grigorik, lập trình viên của Google hướng dẫn các tính năng tiên tiến của DT.
- Và cuối cùng là hướng dẫn của Paul Irish tại sự kiện Google I/O (http://tinyurl.com/pltdlxr).
.jpg "Trường THCS Nguyễn Văn Trỗi tổng kết năm học 2024 - 2025")
