Hướng Dẫn Hiển Thị Chức Năng Inspect Element Trên 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..

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

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.

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.

• 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.

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.

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.241 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

Related Articles

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

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

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 Clear Sky 30 ℃ 32º - 24º 63% 1.54 km/h 32℃ CN 25℃ T2 31℃ T3 33℃ T4 31℃ T5

• 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

Facebook X LinkedIn Pinterest Telegram Back to top button Close Tìm kiếm cho:

• Facebook
• X
• LinkedIn
• YouTube
• Tumblr
• Instagram

Bài VIết Phổ Biến

• Tools hỗ trợ Plugin WordPress là gì? Và Các Nhóm Plugin WordPress Cơ Bản 7 Tháng mười hai, 2018
• Những Dự Báo Về Đồng Tiền Số Vào Năm 2018 9 Tháng Một, 2018
• Thực Hư Về Các Trò Lừa Đảo Qua Bitcoin 19 Tháng mười, 2017
• Lợi Ích Của Việc SEO Từ Khóa Lên Top Google 17 Tháng tư, 2018
• Mẫu Website Game Đẹp Và Chuyên Nghiệp 5 Tháng bảy, 2018

Bài Viết Được Xem Nhiều Nhất

• 21 Tháng mười hai, 2018

  Top 5 Phần Mềm Quản Lý Doanh Nghiệp Tốt Nhất Hiện Nay

• 14 Tháng mười hai, 2019

  Cách Chuyển Web Wordpress Từ Localhost Lên Host

• 19 Tháng hai, 2019

  Bảo Hiểm SSL là Gì?

• 1 Tháng mười một, 2018

  Những Phần Mềm Hữu Ích Dành Cho Doanh Nghiệp

• 18 Tháng ba, 2019

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

• 23 Tháng năm, 2018

  Những Chi Phí Cần Thiết Để Duy Trì Website

Close Search for Close Search for