项目作者： bluemoehre
项目描述 ：
This Google Chrome extension simplifies the daily work with webpage meta data. It allows you to see all these information at a glance, nicely grouped and in real time within your DevTools.
高级语言： JavaScript
项目地址: git://github.com/bluemoehre/chrome-meta-debugger.git
This Chrome extension streamlines your daily tasks by analyzing and displaying webpage metadata like Titles, Descriptions, Canonicals, Open Graph, Social Sharing Tags and more.
Features
- Standardized view: \
Displays the document’s head elements in a consistent format:\
<title>, <meta>, <base>, <link>, <style><script><noscript> - Integrated panel: \
Access the “Meta” panel directly within Chrome DevTools. - Advanced filter: \
Searches across all metadata. Options allow focusing on specific purposes. - Real-Time updates: \
All metadata is dynamically updated in real-time. - Element Inspector: \
Provides direct links into the Chrome Element Inspector Panel. - Duplicate Detection: \
Automatically identifies and highlights duplicate metadata elements. - SEO Analysis: \
Automatically detects and highlights (potential) SEO issues.
How to install
A little icon should now appear right next to your address bar.
If you now open the DevTools a new panel “Meta” should be provided.
How to use
- Results are displayed in their source code order
- The result list is always kept up-to-date. When (for whatever reason) it seems stucked,
you may press the reload button located at the upper right. - The filter can be easily used by starting typing (the input doesn’t need to be focused before)
- You can filter by multiple arguments if you use
, as delimiter (e.g. “title, canonical”) - To show up result options/actions simply hover its row
How to build
- Clone this repository
- Run
npm ci to install exactly the packages that have been checked in - Run
npm run build to create a new build - Open Chrome / Chromium
- Navigate to
chrome://extensions/ - Click “Load unpacked extension“ and select the
dist folder from your local copy
Future Plans
- better handling of search event within meta panel
- highlight real time changes within the list
- provide a history of all changes made after the initial page load to track JavaScript behaviors
- add image preview
- add option to exclude stylesheets
Icons
The SVG icons used in this project have been created by Google Inc. and
are licensed under the Apache-2.0 License.
Have a look into the Material Design Icons for more of these.
Created with ❤️ in Hamburg, Germany\
Updated with 🔥 in Lüneburg, Germany
