Inspect Element: Làm thế nào để chỉnh sửa tạm thời một trang web bất kỳ?

Inspect Element: Làm để chỉnh sửa tạm thời trang web bất kỳ? Kích chuột phải vào trang web bất kỳ, click chọn Inspect bạn nhìn thấy thứ bên trang web đó, bao gồm: mã nguồn, hình ảnh CSS thiết kế, font chữ biểu tượng mà trang sử dụng mã Javascript ảnh động, Trên trình duyệt bạn có cơng cụ ẩn mạnh mẽ: Inspect Element Kích chuột phải vào trang web bất kỳ, click chọn Inspect bạn nhìn thấy thứ bên trang web đó, bao gồm: mã nguồn, hình ảnh CSS thiết kế, font chữ biểu tượng mà trang sử dụng mã Javascript ảnh động, Bạn cịn xem thời gian để tải trang web, băng thơng để tải màu sắc xác sử dụng text trang web Hoặc ngồi bạn cịn sử dụng Inspect element để chỉnh sửa trang web mà bạn muốn Inspect element cách hồn hảo để tìm hiểu cách đánh dấu trang web, tìm lỗ hổng lỗi trang web bạn, tìm hiểu giả lập màu sắc font chữ thay đổi Đó cơng cụ “siêu mạnh” trình duyệt mà bạn chưa biết đến Cùng tìm hiểu cách sử dụng Inspect Element để hỗ trợ cho công việc bạn, dù bạn nhà developer hay đơn giản tìm hiểu để có thêm thông tin Inspect element Tại lại nên sử dụng Inspect element? Nếu tò mò mã code trang web đó, hẳn bạn thắc mắc cách sử dụng Inspect element - Designer: Bạn muốn xem trước trang web thiết kế hiển thị thiết bị di động?, hay thứ Bạn thao tác vòng vài giây với Inspect Element - Marketer: Nếu tị mị keyword (từ khóa) mà đối thủ cạnh tranh bạn sử dụng tiêu đề trang muốn kiểm tra tốc độ load trang Google? Inspect element hiển thị tất thứ - Writer: Nếu đau đầu việc làm mờ tên địa emal ảnh chụp hình? Với Inspect element, bạn thay đổi nội dung, text trang web mà vài giây - Support Agent: Nếu cần giải pháp tốt để nhà developer fix trang web họ Inspect element cho phép bạn thực ví dụ thay đổi để hiển thị nhanh chóng bạn nói Inspect element cơng cụ hữu ích cho bạn, phần cơng cụ Developer Tools trình duyệt bạn Công cụ bao gồm số tính năng: giao diện điều khiển để chạy mã code, trang View Source để xem Raw Code phía sau trang web, trang Soure (trang nguồn) với danh sách tất tập tin tải trang web, Dưới cách sử dụng tab Element để tinh chỉnh trang web Bắt đầu với Inspect Element Có số cách để truy cập Inspect Element Google Chrome Chỉ cần mở trang web mà bạn muốn chỉnh sửa, sau thực theo số cách đây: - Kích chuột phải vào vị trí trang web bạn, phía menu xuất cửa sổ popup, bạn nhìn thấy Inspect, nhiệm vụ bạn click chọn Inspect - Click vào biểu tượng hình cưa (hoặc biểu tượng dịng gạch ngang) góc bên phải hình, click chọn More tools => Developer tools Hoặc cách khác Menu File => Developer => Developer Tools - Nhấn tổ hợp phím Command + Option + I (đối với Mac) nhấn phím F12 máy tính Windows để mở Inspect Element mà không cần click thêm bước Theo mặc định công cụ Developer Tools mở bảng góc cửa sổ trình duyệt bạn hiển thị tab Elements Click chọn biểu tượng dấu chấm thẳng hàng bảng Inspect element (gần biểu tượng dấu X) Lúc bạn nhìn thấy tùy chọn để di chuyển bảng sang phía bên phải cửa sổ trình duyệt để mở bảng riêng biệt Trong ví dụ mở bảng Inspect element phía bên phải cửa sổ trình duyệt Bạn mở rộng thu hẹp mở rộng bảng Developer Tools cách di chuyển chuột bên trái border Khi biểu tượng "" xuất hện, kéo biểu tượng sang khung bên trái để mỏ rộng bảng kéo sang phải để thu hẹp Trên cửa sổ Inspect Element, có loạt cơng cụ hữu ích mà bạn sử để tạo trang web Trong phần hướng dẫn này, Quản trị mạng tập trung vào tab Elements, Emulation tab Search - Tab Search: Tab Search cho phép bạn tìm kiếm trang web có nội dung cụ thể cho phần tử HTML Click vào biểu tượng dấu chấm, sau click chọn Search All Files để hiển thị file Và bạn tìm kiếm file quan trọng trang web mà bạn muốn - Tab Elements: Inspect element cơng cụ mà tìm hiểu nhiều hướng dẫn Click vào tab Elements công cụ Developer tools để trở lại bạn khám phá vị trí khác Trên tab Explore bạn nhìn thấy tất HTML, JavaScrit CSS tích hợp trang web Nó giống xem mã nguồn trang web, nhiên có điểm khác bạn thực thay đổi mã xem thay đổi thời gian thực trang web mà bạn mở Bạn thay đổi điều font chữ, chụp ảnh hình lưu thay đổi bạn (chỉ cần vào View => Developer => View Source lưu trang file HTML, chép thay đổi mã để trình sửa văn Sau reload lại trang, tất thay đổi bạn bị biến - Tab Emulation: Đã bạn muốn xem trươc trang web điện thoại di động mà khơng cần phải lôi điện thoại hay chưa? Tab Emulation cho phép bạn xem trang web giống cách mà bạn xem trang web thiết bị đó, với thiết lập thiết bị phổ biến tùy chọn để thiết lập độ phân giải hình tỉ lệ hình (aspect ratio) Thậm chí bạn cịn thiếtlập mơ tốc độ internet để xem cách load trang web nhanh chóng Tuy nhiên Emulation bị ẩn, bạn phải kích hoạt cách mở Inspect Element, nhấn phím Esc sau chọn tab Emulate kích hoạt nút Enable Emulation để kích hoạt Tìm kiếm thứ trang web với Search Nếu muốn tìm xác thứ trang web u thích bạn, Search cơng cụ tốt dành cho bạn Ngồi việc đọc tồn mã nguồn trang web, bạn mở xem Elements mặc định, nhấn tổ hợp phím Ctrl + F Command + F tìm kiếm thơng qua mã nguồn Tuy nhiên công cụ Search đầy đủ cho phép bạn tìm kiếm thơng qua tập tin trang, giúp bạn tìm kiếm văn bên file CSS JavaScript xác định biểu tượng hình ảnh mà bạn cần cho viết Để bắt đầu, mở Zapier.com trình duyệt Chrome bạn chưa có sẵn, sau mở Inspect Element, click vào biểu tượng dấu chấm thẳng hàng góc bên phải cửa sổ bảng Developer Tools (gần biểu tượng dấu X), sau chọn Search All Files Tab Search hiển thị nửa bảng Developer Tools Tại khung Seach, bạn nhập thứ mà bạn muốn tìm trang web thông tin bạn cần hiển thị bảng Nhập meta name vào khung Search nhấn Enter, bạn nhìn thấy tất meta name xuất đoạn mã code trang Bây bạn nhìn thấy siêu liệu (metadata) trang xác, từ khố SEO đích xem có cấu hình để Google Index tìm kiếm hay khơng Đây cách đơn giản để xem đối thủ cạnh tranh bạn nhắm mục tiêu đến để chắn bạn không bỏ lỡ thứ trang Tiếp theo thử truy vấn khác Xóa meta name đi, sau nhập h2 vào khung Search nhấn Enter Bạn thấy vị trí xuất h2 file JavaScript Zapier góc cùng, sau cuộn xuống bạn nhìn thấy h2 tiêu đề trang Search cơng cụ hữu ích dành cho nhà developer, bạn cịn tìm kiếm màu sắc Nhập #ff4a00 vào khung Search nhấn Enter (và đảm bảo bạn đánh tích chọn Ignore case để xem tất kết tìm kiếm) Bây bạn nhìn thấy vị trí màu #ff4a00, màu cam Zapier trang file CSS HTML Sau click chọn dịng “color: #ff4a00;”để nhảy đến dịng trang HTML, bạn tinh chình theo ý muốn Đây giải pháp hữu hiệu cho designer để đảm bảo trang web thiết lế theo phong cách thương hiệu họ Với cơng cụ Search, designer dễ dàng kiểm tra CSS trang web để tìm kiếm màu sắc áp dụng có bị sai yếu tố, hay font chữ sai sử dụng trang web bạn sử dụng màu sắc cũ vị trí trang web Ngồi cơng cụ Search giải pháp hồn hảo để developer giao tiếp tốt hơn, bạn cho họ thấy xác vị trí mà bạn tìm thấy lỗi sai xác vị trí cần phải thay đổi Chỉ cần nói cho họ biết số dịng có lỗi tồn họ sửa lỗi cách nhanh chóng Hoặc bạn thay đơi trang web Elements, phần cốt lõi công cụ Developer Tools trình duyệt Chrome Thay đổi thứ với Elements Font-end developer sử dụng cơng cụ Inspect Element hàng ngày để chỉnh sửa phần hiển thị bên trang web thử nghiệm ý tưởng Elements cho phép bạn tinh chỉnh phần hiển thị bên trang web nội dung trang web cách thêm phần chỉnh sửa file CSS HTML trang web Sau đóng reload lại trang, cá thay đổi bạn biến mất, bạn nhìn thấy thay đổi máy tính Bằng cách bạn tự để trải nghiệm thay đổi điều gì, sau chép lưu lại thay đổi tốt để sử dụng lại lần sau Cùng xem mà làm: Click vào tab Elements bảng Developer Tools, muốn phóng to hơn, bạn nhấn phím Esc để đóng khung Search mà bạn mở trước Và bạn nhìn thấy mã HTML trang Ở góc bên trái bảng Developer, bạn nhìn thấy biểu tượng chuột nằm phía hình vng Nhiệm vụ bạn click chọn biểu tượng đó, sau chọn element trang mà bạn muốn thay đổi Và thứ thay đổi Thay đổi text trang web Thậm chí có muốn thay đổi text trang web muốn xóa địa email bạn ảnh chụp hình, bạn làm tất điều Click vào biểu tượng hình chuột nằm hình vng, sau click chọn đoạn text trang web Trên bảng công cụ Developer Tools bạn nhìn thấy đoạn text đánh dấu màu xanh đây: Kích đúp chuột vào đoạn text đánh dấu màu xanh "Connect the apps you use" bảng công cụ Developer Tools xuất khung chỉnh sửa văn Nhập nội dung mà bạn muốn vào khung text nhấn Enter Và bạn hoàn tất việc thay đổi text trang web Refresh lại trang web bạn thứ trở trạng thái "bình thường" Bảng Developer Tools reload lại trang, nhiên bạn đóng bảng cơng cụ Developer Tools lại cách click chọn biểu tượng hình X góc bên phải trang Bây bạn mở lưu Tất bạn cần làm kích chuột phải vào vị trí trang mà bạn muốn chỉnh sửa, sau dó click chọn link Inspect linkInspect Element xuất góc bên menu chuột phải Khi bảng công cụ Developer Tools mở, tự động đen đánh dấu câu Thay đổi màu sắc font chữ Elements Ở phía bên phải câu bảng Developer Tools, bạn nhìn thấy bảng có đính kèm thêm tab: Styles, Computed Event Listeners Mỗi tab cho phép bạn thay đổi cách xuất câu trang Đầu tiên bắt đầu với tab Styles Tại tab bạn nhìn thấy số dòng bị gạch ngang Điều đồng nghĩa với việc style không active cho element lựa chọn, việc thay đổi giá trị khơng ảnh hưởng Vẫn tiếp tục với câu lựa chọn, tìm thuộc tính "text-align" (sắp xếp nội dung theo chiều ngang) tab Styles Bạn nhìn thấy thiết lập "center" (căn giữa), kích đúp chuột vào "center"và nhập "left" để xếp nội dung theo chiều ngang phía bên trái trang Tiếp theo đến màu sắc Dưới tagline trang chủ Zapier bạn nhìn thấy nút đăng nhập màu cam Thực bước để thay đổi màu sắc Chọn nút cách kích chuột phải sau chọn Inspect element cần click biểu tượng hình mũi tên nằm hình vng, sau click chọn nút Bạn hiểu Tagline dạng slogan cụm từ ngắn gọn, dễ nhớ sống động tóm tắt công ty sản phẩm Tại tab Style, bạn tìm dịng có tên hình đây: Kích đúp chuột vào "#4199ad", nhập #FF4A00 vào nhấn Enter Và màu sắc nút thay đổi Thay đổi Element States Tại tab Styles bạn nhìn thấy biểu tượng hình đinh ghim nằm góc bên phải Nhiệm vụ bạn click chọn biểu tượng hình đinh ghim bảng "force element state" nhỏ xuất Bảng cho phép bạn hiển thị trạng thái khác element (đặc biệt link nút button) Ngồi bạn cịn nhìn thấy element có khách "di chuột" qua (hover state), lựa chọn element (focus state), click vào link (visited state) Cùng thử nghiệm xem kết Đầu tiên cần đảm bảo bạn lựa chọn nút đăng nhập trang chủ Zapier Tiếp theo click chọn "hover" mục "force element state", kích đúp chuột vào giá trị màu Bây bạn thay đổi giá trị màu background thành #FF4A00 màu sắc nút đăng nhập thay đổi Bỏ tích mục Hover chọn, sau di trỏ chuột bạn qua nút đăng nhập bạn nhìn thấy hover state thay đổi Thay đổi hình ảnh Với Inspect Element, bạn dễ dàng thay đổi hình background trang web Thử thay đổi ảnh background Superhero trang Zapier hình ảnh vết sáng mặt trời NASA Đầu tiên chép dán link vào hình ảnh: https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg Tiếp theo mở Inspect Element background trang chủ Zapier đảm bảo bạn lựa chọn dòng landing-hero-container mã code Kích đúp chuột vào link URL Background bảng Styles dán link bạn chép Nhấn Enter kết hiển thị Lưu ý: Ngồi bạn cịn thay đổi hình ảnh ảnh GIF video, tất bạn cần link file bạn thêm link vào Kiểm tra trang web thiết bị với Emulation Trong thời đại cơng nghệ bùng nổ ngày nay, bạn truy cập trang web khơng máy tính mà cịn truy cập thiết bị khác điện thoại di động, máy tính bảng (tablet), TV Emulation cơng cụ tuyệt vời để bạn sử dụng để test, kiểm tra trang web bạn xuất thiết bị trình duyệt khác Trên bảng Developer Tools bạn nhìn thấy biểu tượng nhỏ hình điện thoại di động nằm góc bên trái Click vào biểu tượng Điều thay đổi vài thứ trang: Bạn nhìn thấy vài tùy chọn black ruler trang web hình Bạn nhìn thấy mục Emulation bảng công cụ Developer Tools (nếu không thấy xuất Emulation, bạn nhấn phím Esc click chọn tab Emualtion) Để bắt đầu, click chọn nút Enable emulation bảng Developer Tools Tại có tùy chọn emulation là: Media, Network, Device Sensors Cùng xem tùy chọn làm cơng việc gì? - Media: Media hiển thị giao diện trang web phương tiện, thiết bị khác nhau: máy chiếu, in giấy thiết bị phép kết nối Mỗi trang web có giao diện khác trang sử dụng nhiều thiết bị truyền thông khác Và trang web có nhiều giao diện khác nhau, bạn xem giao diện Sau bạn khám phá làm để thay đổi kịch khác tinh chỉnh style theo ý thích bạn - Network: Network hiên thị trang web bạn trình duyệt khác hệ điều hành, chẳng hạn trình duyệt Chrom máy tính bảng Android, trình duyệt Safari iPhone chạy hệ điều hành iOS Để thử nghiệm, bạn thiết lập "Spoof user agent" mục Network tab Emulation thành "Internet Explorer 7" Mặc dù nhiều thay đổi số trang web thiết kế khác để hỗ trợ việc hiển thị giao diện trang đẹp trình duyệt cũ Ngồi bạn xem khoảng thời gian để load trang tốc độ kết nối Internet chậm Từ Black Frame trang web, click chọn Menu "No throttling" nằm tab Blue (tab màu xanh), chọn GPRS Bây tiến hành reload lại trang bạn nhìn nhìn thấy khoảng thời gian để load trang tốc độ kết nối Internet chậm trình load, trang - Device: Device emulator cho phép bạn xem trang web giống trang hiển thị thiết bị truyền thông khác nhau, độ phân giải kích thước hình Kết hợp với thiết lập trình duyệt tab Network ý tưởng hay để bạn xem giao diện trang hiển thị thiết bị Để tiến hành kiểm tra, bạn click chọn tab Device, sau chọn Model từ Menu Dropdown Lúc hình hiển thị danh sách tùy chọn, bạn click chọn "Apple iPhone Plus" thiết bị mà bạn muốn Giao diện trang web "co lại" kích thước hình iPhone Plus, bạn zoom hình lên cách click biểu tượng dấu "+" nằm góc bên phải Trên iPhone Plus, chế độ xem 1.8em, chế độ xem máy tính 2.7em "em" đơn vị kích thước font chữ cho phép bạn tự động thay đổi kích thước font chữ tồn văn - Sensors: ... ngày để chỉnh sửa phần hiển thị bên trang web thử nghiệm ý tưởng Elements cho phép bạn tinh chỉnh phần hiển thị bên trang web nội dung trang web cách thêm phần chỉnh sửa file CSS HTML trang web. .. khiển để chạy mã code, trang View Source để xem Raw Code phía sau trang web, trang Soure (trang nguồn) với danh sách tất tập tin tải trang web, Dưới cách sử dụng tab Element để tinh chỉnh trang web. .. đầu với Inspect Element Có số cách để truy cập Inspect Element Google Chrome Chỉ cần mở trang web mà bạn muốn chỉnh sửa, sau thực theo số cách đây: - Kích chuột phải vào vị trí trang web bạn,