Chắc còn nhiều bạn còn chưa hiểu về khái niệm Inspect element là gì? Tại sao lại nên sử dụng Inspect element? Hãy cùng khotenmien.vn cùng tìm hiểu cách sử dụng Inspect Element để hỗ trợ cho công việc của bạn, dù bạn là một nhà developer hay chỉ đơn giản là tìm hiểu để có thêm thông tin về Inspect element.
Inspect element là gì?
Inspect element là 1 cách hoàn hảo để tìm biết được cách đánh dấu trang Website, tìm ra các lỗ hổng và lỗi trên trang Web của bạn, tìm hiểu giả lập màu sắc và font chữ thay đổi sẽ như nào. Đấy là một công cụ siêu mạnh trên trình duyệt web mà bạn không bao giờ biết đến.
Tại sao lại nên sử dụng Inspect element?
Nếu tò mò về mã code của một trang Web nào đấy, chắc rằng bạn có thể câu hỏi thắc mắc về cách sử dụng Inspect element.
– Designer: Bạn muốn được xem trước một trang Web được thiết kế sẽ hiển thị như thế nào trên thiết bị di động, hay một thứ gì đấy… bạn có thể thao tác trong vòng vài giây với Inspect Element.
– Marketer: Nếu tò mò về từ khóa mà đối thủ cạnh tranh của bạn sử dụng trên tiêu đề của trang hoặc nếu muốn kiểm tra tốc độ load trang của Google, Inspect element có thể hiển thị tất cả những thứ này.
– Writer: Nếu đang đau đầu về việc làm mờ tên và địa chỉ emal trên ảnh chụp màn hình? Với Inspect element, bạn có thể làm thay đổi bất kỳ nội dung, text trên trang Website mà chỉ mất vài giây.
– Support Agent: Nếu cần một phương án tốt hơn để các nhà developer fix trang Web của họ. Inspect element cho phép bạn có thể thực hiện một VD thay đổi để hiển thị nhanh chóng những gì bạn đang nói.
Inspect element là công cụ có ích cho bạn, đấy thuộc một phần của công cụ Developer Tools trên trình duyệt web của bạn. Công cụ này gồm có một vài tính năng: bố cục và giao diện điều khiển để chạy mã code, trang View Source để xem Raw Code phía sau một trang Website, một trang Soure (trang nguồn) với danh sách tất cả các tập tin được tải trên một trang Web,…
Bắt đầu với Inspect Element
Có một số cách để truy tìm Inspect Element trên Google Chrome. Chỉ cần mở trang Website mà bạn ước muốn chỉnh sửa, sau đó thực hiện theo 1 trong số 3 cách dưới đây:
– Kích chuột phải vào bất kỳ vị trí nào trên trang Website của bạn, và phía dưới menu xuất hiện một cửa sổ popup, tại đây bạn có thể nhìn thấy Inspect, công việc của bạn là click chọn Inspect.
– Click vào biểu tượng hình răng cưa (hoặc biểu tượng 3 dòng gạch ngang) ở góc trên cùng bên phải màn hình, click chọn More tools => Developer tools.
Hoặc cách khác là trên thực đơn file => Developer => Developer Tools.
– Nhấn tổ hợp phím Command + Option + I (đối với Mac) hoặc nhấn phím F12 trên máy tính Windows để mở Inspect Element mà không cần click bất kỳ thêm bước nào.
Theo mặc định công cụ Developer Tools sẽ mở một bảng ở góc dưới cửa sổ trình duyệt web của bạn và hiển thị tab Elements.
Click chọn biểu tượng 3 dấu chấm thẳng hàng trên bảng Inspect element (gần biểu tượng dấu X). Lúc này bạn có thể 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 hoặc để mở một bảng riêng biệt.
Trong VD trên là mở bảng Inspect element ở phía bên phải cửa sổ trình duyệt. bạn có thể mở rộng hoặc thu hẹp hoặc mở rộng bảng Developer Tools bằng cách di chuyển chuột bên trái border.
Trên cửa sổ Inspect Element, có một loạt các công cụ hữu ích mà bạn có thể sử để tạo trang Web. Trong phần chỉ dẫn này, tập trung vào 3 tab là Elements, Emulation & tab Search.
Tab Search:
Tab Search cho phép bạn tìm kiếm một trang Web có nội dung nhất định cho một phần tử HTML. Click vào biểu tượng 3 dấu chấm, sau đấy click chọn Search All Files để hiển thị các tệp. Và bây giờ bạn có thể lên tìm kiếm các tệp tin thiết yếu trên trang Web mà bạn muốn.
Tab Elements:
Inspect element là công cụ mà chúng ta sẽ tìm hiểu nhiều nhất trong hướng dẫn này. Click vào tab Elements trên công cụ Developer tools để trở lại nếu như bạn đang khám phá các vị trí khác.
Trên tab Explore bạn có thể nhìn thấy tất cả HTML, JavaScrit và CSS được tích hợp trên trang Web. Nó kiểu như xem mã nguồn của một trang Web, tuy nhiên có một điểm khác ở đây là bạn có thể thực hiện bất kỳ thay đổi của mã này và xem các thay đổi trong thời gian thực trên trang Website mà bạn đã mở.
Bạn có khả năng làm thay đổi bất cứ điều gì trên các bản sao như font chữ, chụp ảnh màn hình hoặc lưu thay đổi của bạn (chỉ cần vào View => Developer => View Source và lưu các trang như là một tệp HTML, hoặc sao chép những thay đổi mã để trên trình sửa văn bản. sau khi reload lại trang, tất cả thay đổi của bạn có thể bị biến mất.
Tab Emulation:
Đã bao giờ bạn muốn xem trươc một trang Website trên thiết bị di động của mình mà không hẳn phải lôi điện thoại ra hay chưa? Tab Emulation cho phép bạn xem một trang Web kiểu như cách mà bạn xem một trang Web trên một thiết bị bất kỳ nào đấy, với các thiết lập trên các dòng thiết bị phổ biến hoặc một tùy chọn để cài đặt độ phân giải màn hình và tỉ lệ màn hình (aspect ratio). Thậm chí bạn còn có thể thiếtlập mô phỏng tốc độ internet để xem cách load một trang Website rất nhanh như nào.
Thế nhưng Emulation bị ẩn, bởi vậy bạn phải kích hoạt bằng cách mở Inspect Element, nhấn phím Esc sau đó chọn tab Emulate rồi kích hoạt nút Enable Emulation để kích hoạt.
Thay đổi bất kỳ thứ gì với Elements
Font-end developer được dùng trên công cụ Inspect Element hàng ngày để chỉnh sửa phần hiển thị bên ngoài của một trang Website và thử nghiệm các ý tưởng mới. Elements cũng cho phép bạn tinh chỉnh phần hiển thị bên ngoài của một trang Website và cả nội dung của trang Website đấy bằng việc thêm phần chỉnh sửa các file CSS và HTML của trang Website.
Một khi đóng hoặc reload lại trang, cá thay đổi của bạn sẽ biến mất, và bạn có thể chỉ nhìn thấy các thay đổi trên máy tính của mình. Bằng việc này bạn sẽ tự do để trải nghiệm và thay đổi bất kỳ điều gì, sau đấy sao chép và lưu lại các thay đổi tốt nhất để dùng lại trong những lần sau.
Cùng xem những gì mà chúng ta có thể làm:
Click vào tab Elements trên bảng Developer Tools, & nếu 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 sẽ nhìn thấy mã HTML của trang.
Ở góc trên cùng bên trái bảng Developer, bạn sẽ nhìn thấy biểu tượng con chuột nằm ở phía trên cùng một hình vuông. Nhiệm vụ của bạn là click chọn biểu tượng đó, sau đấy chọn bất kỳ element nào trên trang mà bạn mong muốn thay đổi và mọi thứ sẽ thay đổi.
5. Thay đổi text trên trang Web
Thậm chí nếu như có mong muốn thay đổi text trên một trang Web hoặc nếu muốn xóa địa chỉ Email của bạn trên ảnh chụp màn hình, bạn sẽ thực hiện được toàn bộ việc này.
Click vào biểu tượng hình con chuột nằm trên hình vuông, sau đấy click chọn bất kỳ đoạn text nào trên trang Website. Trên bảng công cụ Developer Tools bạn có thể nhìn thấy đoạn text đấy được đánh dấu bằng màu xanh như hình như dưới đây:
Kích đúp chuột vào đoạn text được đánh dấu bằng màu xanh “Connect the apps you use” trên bảng công cụ Developer Tools và sẽ hiển thị khung chỉnh sửa văn bản.
Nhập bất kỳ nội dung nào mà bạn ước muốn vào khung text rồi nhấn Enter. và như vậy bạn đã hoàn tất việc thay đổi text trên trang Web.
Refresh lại trang Website của bạn & mọi thứ sẽ trở về đúng tình trạng “bình thường”.
Bảng Developer Tools cũng sẽ reload lại cùng trang, nhưng bây giờ bạn có thể đóng bảng công cụ Developer Tools lại bằng việc click chọn biểu tượng hình X ở góc trên cùng bên phải trang.
Bây giờ bạn sẽ mở bản copy lưu. tất cả những gì bạn phải cần làm là kích chuột phải vào bất kỳ vị trí nào trên trang mà bạn muốn chỉnh sửa, sau dó click chọn đường link Inspect hoặc đường link Inspect Element xuất hiện ở góc bên dưới thực đơn chuột phải.
6. Thay đổi màu sắc & font chữ của Elements
Ở phía bên phải của câu trên bảng Developer Tools, bạn sẽ nhìn thấy một bảng con có đính kèm thêm 3 tab: Styles, Computed & Event Listeners. Mỗi tab cho phép bạn thay đổi cách xuất hiện của câu trên trang. đầu tiên hãy bắt đầu với tab Styles.
Tại tab này bạn sẽ nhìn thấy một vài dòng bị gạch ngang. Điều này đồng nghĩa với việc các style này không được active cho element đã được lựa chọn, vì thế việc thay đổi các giá trị này cũng không ảnh hưởng gì.
Vẫn tiếp tục với câu đã được chọn lựa, chúng ta sẽ tìm tính chất “text-align” sắp xếp các nội dung theo chiều ngang) tại tab Styles.
Bạn có thể nhìn thấy nó được thiết lập là “center” (căn giữa), kích đúp chuột vào “center” & nhập “left” để sắp đặt các nội dung theo chiều ngang về phía bên trái của trang.
Kế tiếp là đến màu sắc.
Dưới tagline trang chủ Zapier bạn có thể nhìn thấy một nút đăng nhập màu cam. Thực hiện các bước để thay đổi màu sắc. Chọn nút bằng cách kích chuột phải sau đấy chọn Inspect element hoặc chỉ cần click biểu tượng hình mũi tên nằm phía trên hình vuông, sau đó click chọn nút.
Bạn sẽ hiểu Tagline là một dạng slogan hoặc cụm từ ngắn gọn, dễ nhớ và sống động tóm lược về một doanh nghiệp hoặc một sản phẩm.
Tại tab Style, bạn tìm dòng có tên như hình dưới đây:
Kích đúp chuột vào “#4199ad”, nhập #FF4A00 vào đó rồi nhấn Enter.
Màu sắc của nút đã được thay đổi.
Tổng kết
Trên đây là tất cả những thông tin cần thiết về Inspect element là gì? Và cách sử dụng Inspect element một cách dễ dàng mà bạn nên biết. Hy vọng bài viết mình mang lại sẽ giúp bạn có thêm những lựa chọn và có thể giúp bạn hiểu hơn về Inspect element.
Xem thêm : Cách làm portfolio cá nhân ấn tượng và dễ dàng nhất
Thanh Xuân – Tổng hợp, bổ sung
