Hướng Dẫn Hiển Thị Chức Năng Inspect Element Trên Safari

Có thể bạn quan tâm

Huong-Dan-Hiien-Thi-Inspect-Element-Tren-Safari

[toggle title=”Bạn Có Bao Giờ Tìm Kiếm “Inspect Element” Trên Safari?” state=”close”]Trong Chrome, Firefox, Explorer hoặc bất kỳ trình duyệt nào khác, nhấp chuột phải hoặc nhấn Phím chức năng F12 để xem Inspect Element. Nhưng nó không xảy ra trong trường hợp trình duyệt Safari.[/toggle]

[toggle title=”Làm Cách Nào Để Hiển Thị Chức Năng “Inspect Element” (Kiểm Tra Phần Tử) Trên Safari Trong Menu Chuột Phải?” state=”close”]Để hiển thị tính năng “Inspect Element” (Kiểu tra phần tử), điều đầu tiên bạn cần phải làm là kích hoạt menu Develop trong Preferences.. => Advanced. Kiểm chọn dòng Show Develop menu in menu bar ở cuối hộp thoại.[/toggle]

[toggle title=”Mở Chức Năng Web Inspect Trên Safari?” state=”close”]Để mở chức năng web Inspect trên Safari bạn chọn Develop => Close Web Inspector để kiểm tra phần tử HTML trên website. Hoặc bạn có thể mở Web Inspect bằng cách Click chuột phải => Inspect Element để kiểm tra các phần tử HTML của website.[/toggle]

[toggle title=”Kiểm Tra Giao Diện Mobile Của Website Trên Safari Như Thế Nào?” state=”close”]Để kiểm tra giao diện mobile của website trên safari bạn chọn Develop => Enter Responsive Design Mode.[/toggle]

Hướng Dẫn Hiển Thị Chức Năng “Inspect Element” (Debug Website) Trên Safari

Giống như trình duyệt Firefox và Chrome, Apple cũng trang bị cho trình duyệt của mình một bộ công cụ mạnh mẽ để hỗ trợ các nhà lập trình khảo sát và chỉnh sửa trang web của mình ngay trên trình duyệt Safari để xem log, chỉnh sửa lỗi css mà không cần edit source. Nếu như Chrome và Firefox đều có thể Inspect/Inspect Element (Kiểm Tra Phần Tử) trên Win hay Mac, thì Safari lại là chuyện khác, chúng chỉ có thể dùng Safari trên macOS để debug. Vậy làm sao để hiển thị chức năng Inspect Element (Debug Website) trên Safari? Cùng EPAL tìm hiểu ngay trong bài viết này nhé!

Bước 1: Để hiển thị chức năng Inspect Element trên Safari, điều đầu tiên bạn cần phải làm là kích hoạt menu Develop trong Safari => Preferences..

Huong-Dan-Hien-Thi-Chuc-Nang-Inspect-Element-Tren-Safari (1)

Trong Advanced kiểm chọn dòng Show Develop menu in menu bar ở cuối hộp thoại

Huong-Dan-Hien-Thi-Chuc-Nang-Inspect-Element-Tren-Safari (2)

Bước 2: Trên thanh menu của Safari chọn Develop => Connect Web Inspector để kiểm tra phần tử HTML trên website. Hoặc bạn có thể mở Web Inspector bằng cách Click chuột phải => Inspect Element để kiểm tra các phần tử HTML của website.

Huong-Dan-Hien-Thi-Chuc-Nang-Inspect-Element-Tren-Safari (3)

Web Inspector là trung tâm điều khiển, cho phép bạn dễ dàng truy cập vào bộ công cụ lập trình được tích hợp trong Safari. Bộ công cụ này được sắp xếp thành từng tab riêng biệt và bạn hoàn toàn có thể sắp xếp lại thứ tự của chúng.

Huong-Dan-Hien-Thi-Chuc-Nang-Inspect-Element-Tren-Safari (4)

Elements: Hiển thị và khảo sát các thành phần tạo nên DOM (Document Object Model) của một trang web (các thẻ <div>, <span>, <a>,…).
Network: Hiển thị danh sách chi tiết của tất cả các hệ thống mạng sử dụng tài nguyên của trang web, qua đó bạn có thể đánh giá nhanh trạng thái, mức độ phản hồi, các giới hạn, và hơn thế nữa.
Debugger: Sử dụng công cụ sửa lỗi để giúp bạn tìm ra nguyên nhân gây ra các lỗi Javascript trên trang web.
Resources: Hiển thị tài nguyên của trang web như hình ảnh, font, script, css, … Bạn có thể xác nhận mọi thứ có được vận hành theo đúng định dạng và cấu trúc mình muốn hay không.
Timelines: Cung cấp các thông tin về những hoạt động xảy ra với trang web đang mở, như là mạng, layout và tình trạng kết xuất, JavaScript và các sự kiện, và bộ nhớ. Mọi thứ được phát hoạ gọn gàng trên một thanh tiến trình hoặc ghi lại thành từng frame, giúp bạn nhiều cách khám phá để tối ưu cho trang web.
Storage: Hiển thị chi tiết nơi lưu trữ dữ liệu trong bộ nhớ đệm của trang web như application cache, cookies, databases, indexed databases, local storage, và session storage.
Canvas: Công cụ mới này giúp dễ dàng chẩn đoán các vấn đề về hiệu năng và tính chính xác trong mã bản vẽ canvas mà không cần phải tự tạo mã cho bạn.
Audit: Được biểu diễn dưới dạng cây kiểm toán, mỗi kiểm toán có thể được chạy trên trang được kiểm tra. Kiểm toán có thể là một nhóm các cuộc kiểm toán khác (Ví dụ: nhóm thử nghiệm) hoặc trường hợp thử nghiệm riêng lẻ.
Console: Gõ các lệnh JavaScript vào console để sửa lỗi, bổ sung hay lấy thông tin trang web. Bạn cũng có thể thấy các nhật ký, các lỗi, và các cảnh báo từ trang web, từ đó có thể nhận định mức độ quan trọng của vấn đề và định ra hướng giải quyết một cách nhanh chóng.

Ngoài ra Safari có một giao diện mạnh mẽ giúp các nhà lập thử nghiệm nhanh tình trạng trang web hiển thị trên màn hình các thiết bị với kích thước và độ phân giải phổ biến hiện nay như Iphone, Ipad,… có tên là Responsive Design Mode.

Để sử dụng công cụ này bạn chọn Develop => Enter Responsive Design Mode.

Huong-Dan-Hien-Thi-Chuc-Nang-Inspect-Element-Tren-Safari (5)

Bạn có thể tùy chỉnh bằng cách click vào thiết bị để thay đổi kích thước, thậm chí bạn có thể hiển thị cửa sổ ở chế độ Split View của IPad nữa.

Huong-Dan-Hien-Thi-Chuc-Nang-Inspect-Element-Tren-Safari (6)

Cảm ơn bạn đã theo dõi bài viết, hi vọng với những chia sẻ của EPAL sẽ giúp ích được bạn trong việc mở debug trên trình duyệt Safari.

Xem Video Hướng Dẫn Hiển Thị Chức Năng “Inspect Element” (Debug Website) Trên Safari

Có Thể Bạn Quan Tâm:

Hướng Dẫn Mở Tab Ẩn Danh Với Trình Duyệt Safari
Những Trình Duyệt Web Phổ Biến Hiện Nay
4 cách tải lại trang (reload) hiệu quả nhất trên trình duyệt Google Chrome

TagsSafari

EPAL Solution Send an email 2 Tháng Một, 20200 26.238 4 minutes read Show More Share Facebook X LinkedIn Tumblr Pinterest Reddit VKontakte Share via Email Print

EPAL Solution

Thiết kế Website chuyên nghiệp, Phần mềm CRM, Phần mềm quản lý thu học phí.

Facebook

Thiết Kế Website Doanh Nghiệp Startup – Đầu Tư Cho Phát Triển Lâu Dài

Google Doanh Nghiệp Là Gì? Những Lợi Ích Tuyệt Vời Từ Google Doanh Nghiệp

Hướng Dẫn Tạo API Đăng Nhập Bằng Google

15 Tháng hai, 2020

Hướng Dẫn Tạo API Đăng Nhập Bằng Facebook.

12 Tháng hai, 2020 Mo-tab-an-danh

Hướng Dẫn Mở Tab Ẩn Danh Với Trình Duyệt Safari Và Chrome Trên iPhone

26 Tháng tám, 2019 loi-update-svg

Cách Khắc Phục Lỗi Upload File SVG Không Cần Cài Plugin

18 Tháng ba, 2019

Để lại một bình luận Hủy

Bạn phải đăng nhập để gửi bình luận.

Theo Dõi Epal

0 Facebook
0 Followers
22 Subscribers
24 Followers

Thời Tiết HCM Scattered Clouds 24 ℃ 31º - 22º 67% 2.06 km/h 31℃ T7 28℃ CN 28℃ T2 28℃ T3 32℃ T4

Popular
Recent
Comments

Hướng Dẫn Tạo Địa Điểm Doanh Nghiệp Trên Google Maps 28 Tháng tám, 2018
32 Đề Thi Học Kỳ 2 Môn Tiếng Việt Lớp 2 21 Tháng mười hai, 2018
Đề Cương Ôn Tập Môn Lịch Sử Lớp 4 21 Tháng mười hai, 2018
Hướng Dẫn Upload Hình Ảnh Lên Website Wordpress 24 Tháng mười, 2018
Hướng Dẫn Hiển Thị Chức Năng “Inspect Element” (Debug Website) Trên Safari 2 Tháng Một, 2020

Phương pháp luận Agile và mô hình Scrum là gì? Chia sẻ cách làm việc hiệu quả khi ứng dụng Scrum 5 Tháng mười, 2024
Cách Tích Hợp Messenger (Facebook Chat) Vào Website Đơn Giản 8 Tháng tám, 2023
Tiện ích họp online Google Meet, các kinh nghiệm sử dụng hiệu quả và so sánh giữa Google Meet với Zoom 27 Tháng sáu, 2023
Hướng dẫn scan tài liệu bằng Google Drive trên điện thoại Android và iOS (iPhone) 21 Tháng sáu, 2023
ChatGPT là gì? Hướng dẫn tạo tài khoản ChatGPT 20 Tháng sáu, 2023

Phần Mềm Quản Lý Dự Án Và Những Lợi Ích | Halozend
[…] Top 5 Phần Mềm Quản Lý Doanh Nghiệp Tốt Nhất Hiện...
Phần Mềm Quản Lý Công Việc - Tối Đa Hiệu Suất Và Thời Gian Làm Việc
[…] Những Phần Mềm Hữu Ích Dành Cho Doanh Nghiệp [...
Nguyễn Thanh Tâm
Đã thử và thành công! :D...
SVG Là Gì? Ưu Nhược Điểm Của File SVG | Blog Epal
[…] >> Xem Thêm: Cách Khắc Phục Lỗi Upload...
Thiết Kế Website Bao Nhiêu Tiền Là Hợp Lý | Thiết Kế Website
[…] Những Chi Phí Cần Thiết Để Duy Trì Website [...

Bài Viết Mới

Cách Tích Hợp Messenger (Facebook Chat) Vào Website Đơn Giản 8 Tháng tám, 2023
Tiện ích họp online Google Meet, các kinh nghiệm sử dụng hiệu quả và so sánh giữa Google Meet với Zoom 27 Tháng sáu, 2023
Hướng dẫn scan tài liệu bằng Google Drive trên điện thoại Android và iOS (iPhone) 21 Tháng sáu, 2023
ChatGPT là gì? Hướng dẫn tạo tài khoản ChatGPT 20 Tháng sáu, 2023