-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
07fba0a
commit b3cb46d
Showing
4 changed files
with
1,309 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,25 @@ | ||
| # har-file-analyzer | ||
|
|
||
| Analyze HTTP Archive (HAR) files to export, filter, and group the data to JSON | ||
|
|
||
| HAR File Analyzer repo can run on its own by simply cloning the repository to your local and then opening the index.html file in the browser. | ||
|
|
||
| To run the app, do the following: | ||
|
|
||
| 1. `git clone https://github.com/bennettfrazier/har-file-analyzer.git` | ||
| 2. `cd har-file-analyzer` | ||
| 3. `open index.html` | ||
|
|
||
| The app allows you to traverse through the HAR file entries, and export the specific data related to each entry. There is simple filtering, search (which could likely be improved) and multi-selection capabilities. | ||
|
|
||
| Under the hood this is using [Water.css](https://watercss.kognise.dev/) for simple styling, [Fuse.js](https://www.fusejs.io/) for fuzzy client-side search, and vanilla JavaScript for JSON tree traversing. | ||
|
|
||
| It attempts to handle various mimeTypes, and if it cannot display the resulting data, the HAR analyzer will attempt to display it in an Preformated Text element (pre). | ||
|
|
||
| Columns can be toggled and resized in the HAR entries table. | ||
|
|
||
| Data can be exported in a group, based on the type of JSON tree node that is selected and applied to multiple HAR entries. | ||
|
|
||
| I'm sure there are bugs, as this was created in two nights. Please open issues if you have any problems viewing, traversing, or exporting HAR entry data. | ||
|
|
||
| This was inspired by the github repository: [Har-File-Analyzer](https://github.com/JC3/harextract) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>HAR File Analyzer</title> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>HAR File Analyzer</h1> | ||
| <input type="file" id="fileInput" accept=".har"> | ||
| <br> | ||
| <div class="buttonActions"> | ||
| <div> | ||
| <label for="filter">Search Data:</label> | ||
| <input type="text" id="filter" placeholder="Enter search term..."> | ||
| </div> | ||
| <div> | ||
| <button id="resetSelection">Reset Selection</button> | ||
| <button id="toggleExportType">Switch to Grouped Export</button> | ||
| <button id="toggleViewMode">Show Response Content Only</button> | ||
| </div> | ||
| </div> | ||
| <!-- Column toggles --> | ||
| <div id="columnToggles"> | ||
| <strong>Toggle Columns:</strong> | ||
| <label><input type="checkbox" class="column-toggle" data-column="queryString" checked> Query String</label> | ||
| <label><input type="checkbox" class="column-toggle" data-column="url" checked> URL</label> | ||
| <label><input type="checkbox" class="column-toggle" data-column="startedDateTime" checked> Started | ||
| DateTime</label> | ||
| <label><input type="checkbox" class="column-toggle" data-column="method" checked> Method</label> | ||
| <label><input type="checkbox" class="column-toggle" data-column="status" checked> Status</label> | ||
| <label><input type="checkbox" class="column-toggle" data-column="statusText"> Status Text</label> | ||
| <label><input type="checkbox" class="column-toggle" data-column="time" checked> Time (ms)</label> | ||
| </div> | ||
|
|
||
| <table id="entriesTable"> | ||
| <thead> | ||
| <tr> | ||
| <th data-column="select"><input type="checkbox" id="selectAll"> | ||
| <div class="resizer"></div> | ||
| </th> | ||
| <th data-column="startedDateTime">Started DateTime<div class="resizer"></div> | ||
| </th> | ||
| <th data-column="method">Method<div class="resizer"></div> | ||
| </th> | ||
| <th data-column="url">URL<div class="resizer"></div> | ||
| </th> | ||
| <th data-column="queryString">Query String<div class="resizer"></div> | ||
| </th> | ||
| <th data-column="status">Status<div class="resizer"></div> | ||
| </th> | ||
| <th data-column="statusText">Status Text<div class="resizer"></div> | ||
| </th> | ||
| <th data-column="time">Time (ms)<div class="resizer"></div> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody id="entriesBody"> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <div class="stickyActionBar"> | ||
| <button id="downloadSelected">Download Selected Entries</button> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="searchResults" style="display:none;"> | ||
| <h3>Search Results</h3> | ||
| <ul id="searchResultsList"></ul> | ||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.