https://github.com/freaktechnik/css-objectnet

Analyze the ID-Class relations of HTML nodes
https://github.com/freaktechnik/css-objectnet

devtools-extension firefox-addon firefox-extension webextension webpack

Last synced: 20 days ago
JSON representation

Analyze the ID-Class relations of HTML nodes

• Host: GitHub
• URL: https://github.com/freaktechnik/css-objectnet
• Owner: freaktechnik
• License: mit
• Created: 2015-09-07T08:38:01.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-02-09T02:15:41.000Z (almost 5 years ago)
• Last Synced: 2024-11-05T11:35:42.455Z (2 months ago)
• Topics: devtools-extension, firefox-addon, firefox-extension, webextension, webpack
• Language: JavaScript
• Size: 330 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ![](data/icon-48b.png) CSS Objectnet

[![Greenkeeper badge](https://badges.greenkeeper.io/freaktechnik/css-objectnet.svg)](https://greenkeeper.io/)

[![Travis CI Builds](https://travis-ci.org/freaktechnik/css-objectnet.svg)](https://travis-ci.org/freaktechnik/css-objectnet) [![Dependency CI](https://dependencyci.com/github/freaktechnik/css-objectnet/badge)](https://dependencyci.com/freaktechnik/css-objectnet)

This is an experimental dev tool to analyze the ID-Class relations of HTML nodes.

The CSS Objectnet panel in the devtools with a graph connecting HTML element IDs with their associated classes. This lets you analyze how you share your code and check classes for only having one responsibility and so on.

Currently there is no interaction on click to the elements in the graph other than a force simulation on the graph.

## Translations

The extension is translated via [Transifex](https://www.transifex.com/freaktechnik/css-objectnet/).

## Development

### Set up environment

Run `npm i` to install all required dependencies.

### Test extension in browser

By running `npm start` the extension will be build and web-ext will launch Firefox with the extension temporarily loaded in a throwaway profile.

### Build extension

To build the extension, run `npm run build`.

### Run tests

The extension both follows eslint rules and linting rules for WebExtensions by Mozilla. To run the linters, run `npm test`.