If you'd like to just view the graph, the simplest way is to use the script:
tools/android/dependency_analysis/start_server.sh
This setup assumes Chromium is in the CHROMIUM_DIR directory (e.g. ~/cr/src/...). Please modify the following command using the path to your chromium repo:
export CHROMIUM_DIR=<path to your repo>
Now you can copy/paste the following and set up these other variables. You can swap out out/Debug in DEP_ANALYSIS_BUILD_DIR to your preferred output dir.
export DEP_ANALYSIS_DIR=$CHROMIUM_DIR/src/tools/android/dependency_analysis export DEP_ANALYSIS_BUILD_DIR=$CHROMIUM_DIR/src/out/Debug
See ../README.md for instructions on using generate_json_dependency_graph.py, then generate a graph file in the src directory (js/src/json_graph.txt) with that exact name:
cd $DEP_ANALYSIS_DIR ./generate_json_dependency_graph.py -C $DEP_ANALYSIS_BUILD_DIR -o js/src/json_graph.txt
Move into the $DEP_ANALYSIS_DIR/js directory before continuing.
cd $DEP_ANALYSIS_DIR/js
First, ensure you have a sufficiently new Node.js version. The dependency viewer doesn't work with v8 for example, and v18.10.0 definitely works.
node -v
Install the latest version with:
nvm install node
You will also need to install npm if it is not already installed (check with npm -v), either from the site or via nvm (Node Version Manager).
To install dependencies:
npm install
npm run serve
If you prefer to run npm commands from the root of your chromium repo:
npm run --prefix tools/android/dependency_analysis/js serve
This command runs webpack-dev-server in development mode, which will bundle all the dependencies and open localhost:8888/package_view.html, the entry point of the bundled output. Changes made to the core JS will reload the page, and changes made to individual modules will trigger a hot module replacement.
To view the visualization, open http://localhost:8888/index.html.
npm run build
This command runs webpack, which will bundle the all the dependencies into output files in the dist/ directory. These files can then be served via other means, for example:
npm run serve-dist
This command will open a simple HTTP server serving the contents of the dist/ directory.
To build and serve, you can execute the two commands together:
npm run build && npm run serve-dist
To view the visualization, open http://localhost:8888/index.html.
The Chromium Dependency Graph Visualizer is hosted at https://chromium-dependency-graph.firebaseapp.com.
If you are a Googler, you can see this doc for how to deploy a new version of the viewer.
To run ESLint on the JS and Vue files:
npm run lint
To let ESLint try and fix as many lint errors as it can:
npm run lint-fix