search

janodvarko / harviewer

HAR Viewer is a web application that allows visualizing HTTP Archive logs (HARs)
http://www.softwareishard.com/blog/har-viewer/
1.04k stars 184 forks source link

Unable to insert harviewer in my html page #130

Closed syndy1989 closed 6 years ago

syndy1989 commented 6 years ago

I'm creating har file using browsemob proxy. As suggested in this https://code.google.com/archive/p/harviewer/wikis/API.wiki I tried to load har files manually using loadHar method. Please find the below sample code:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
 <title>HAR Viewer Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="css/harViewer.css" type="text/css"/> 
</head>
 <div id="content" version="test">
</div> 
<script src="scripts/jquery.js"></script> 
<script data-main="scripts/harViewer" src="scripts/require.js"></script> 

<body class="harBody">
 <div id="content" version="@VERSION@"></div> 
<script src="scripts/jquery.js"></script>
 <script data-main="scripts/harViewer" src="scripts/require.js"></script> 
<script> $("#content").bind("onViewerPreInit", function(event) 
{ 
// Get application object var viewer = event.target.repObject; 

}); 
$("#content").bind("onViewerInit", function(event) { var viewer = event.target.repObject; viewer.loadHar("har.har"); });
</script> </body>
</html>

i keep getting js exception. I have har.zip attached my js files i used and sample har file to recreate this issue. I'm new to this. Any advise on this would be really helpful. Thanks in advance.

gitgrimbo commented 6 years ago

Hi. The simplest way to show a HAR file is to drag-n-drop the HAR file onto the HAR Viewer web page.

A second way is to copy the HAR contents and paste into the textarea on the HAR Viewer page, then click "Preview".

A third way is to use a local server and query parameters. E.g. if using something like http-server as a simple server (requires Node.js):

> cd to-folder-containing-my-har-file
> npx http-server --cors
Starting up http-server, serving ./
Available on:
  http://192.168.1.115:8080
  http://192.168.56.1:8080
  http://192.168.99.1:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Then browse to:

https://gitgrimbo.github.io/harviewer/master/?har=http://localhost:8080/my-har-file.har

Because we used the --cors switch for http-server, the online HAR Viewer should be able to successfully show your HAR file.

The "About" page on HAR Viewer (https://gitgrimbo.github.io/harviewer/master/) has more recent docs than the wiki.

syndy1989 commented 6 years ago

Actually I'm trying to automate things. My report is hosted in a webserver.I won't be able to drag and drop har files in har viewer every time. In order to automate I need to embed this solution. Any advise on how to do that would be of great help.

gitgrimbo commented 6 years ago

Hi, checkout http://gitgrimbo.github.io/harviewer/issue-130/.

There's an "Embedding HAR Viewer" link under "HAR Log Examples" which points to a new page with some examples.

Let me know if this is the sort of thing you are after.

syndy1989 commented 6 years ago

It worked like charm. Thanks much for your help. You can resolve this issue.

syndy1989 commented 6 years ago

i just found that its showing undefined for Method and params. Is there any way to remove that . Please find the below screenshot. undefined

gitgrimbo commented 6 years ago

Is this with the original har file you attached?

I don't see that myself using 'top-level' HAR Viewer:

image

Maybe it's an issue with embedding.

Are there errors in your console?

syndy1989 commented 6 years ago

Yes. thats an issue with the original harfile attached. Is there any way to remove the expandable from harpreview. Any advise on how to do that would be helpful. Please find the below error message:

error

gitgrimbo commented 6 years ago

What do you mean by 'the expandable'? Do you mean you don't want to be able to expand each resource row? There isn't currently the ability to do that.

I've pushed a new version to http://gitgrimbo.github.io/harviewer/issue-130/examples/embed.html that hopefully fixes the CSS issues and allows you to paste in your own HAR/HARP URLs to test embedding.

Let me know if this is sufficient to close the original issue. If you have any separate issues then please raise them separately, cheers.

image

syndy1989 commented 6 years ago

After replacing the css files i'm able to get Response, JSON and other details. But when i try to navigate the tabs my html pages just hangs. Also i'm not sure how to remove the expandable class="netRow loaded isExpandable ". I tried removing it using inspect element in browser.Please find the below screenshot (desired preview without tabs): error

gitgrimbo commented 6 years ago

Hi, I think the original issue relating to better instructions for embedding and fixing some of the embedded HAR Viewer CSS issues can now be closed.

If you agree I will close this issue.

If there are any more issues relating to customising the preview, e.g. turning off the ability to expand a resource row, then please raise a new issue as it will help keep the issues focused, thanks.

syndy1989 commented 6 years ago

Sure You can resolve this issue. Thanks much for your help.