httpwatch使用_使用JavaScript的HTTPWatch自动化

httpwatch使用

背景(Background)

HTTPWatch (automation)
HTTPWatch (自动化)
...with PHP (and again and again, and response)
...用PHP (一次又一次，和response )
JavaScript shell scripting
JavaScript Shell脚本

I gave this short presentation at the recent Yahoo FE summit's open mic, here are the slides and some notes.

我在最近的Yahoo FE峰会的公开麦克风上做了简短的演讲，这里是幻灯片和一些笔记。

幻灯片和截屏视频 (Slides and screencast vid)

JavaScript shell scriptingJavaScript Shell脚本

演示地址

presentations from Stoyan Stefanov的更多 Stoyan Stefanov 演讲

Screencast to see the thing in motion:

截屏以查看运动中的事物：

演示地址

笔记(Notes)

Here's the transcript of the slides as produced by slideshare.net. I've added some notes here and there to make it more readable when the presenter is missing.

这是slideshare.net制作的幻灯片的笔录。我在这里和那里添加了一些注释，以便在缺少演示者时更加可读。

JavaScript Shell脚本-演示文稿 (JavaScript shell scripting - Presentation Transcript)

JavaScript is everywhere #42:
      C:> WSH

```
Stoyan
```
I do programming.
我编程。
```
Programming
```
There are many options to choose from when you decide top practice the art and craft of programming.
当您决定优先练习编程的技巧和技巧时，有很多选择。
```
JavaScript
```
... is a very good one. Simply because JavaScript...
...是非常好的。仅仅是因为JavaScript ...
```
... is everywhere
```
```
On the server
```
node.js, asp.net
node.js，asp.net
```
Mobile
```
html5, phonegap, titanium
html5，phonegap，钛
```
Desktop
```
XULRunner lets you create cross-OS GUI apps
XULRunner使您可以创建跨OS GUI应用
```
Browser extensions
```
FF, Chrome, bookmarklets...
FF，Chrome，书签...
```
Photoshop
```
yep, that too Several Adobe products actually let you script common/uncommon/programmable tasks
是的，实际上还有几种Adobe产品可让您编写常见/不常见/可编程任务的脚本
```
Form validation too!
```
(this was supposed to be funny)
(这本来很有趣)
```
Shell scripting
```
let's talk about shell scripting with JavaScript
让我们谈谈用JavaScript编写Shell脚本
```
In Windows
```
```
WSH: Windows Scripting Host
```
All reasonable Windows machines (at least as old as Win2000) have this Windows Scripting Host in there. You can write VBScript or JavaScript (OK, JScript) to ... well, script. How does it work?
所有合理的Windows机器(至少与Win2000一样老)都具有该Windows脚本宿主。您可以将VBScript或JavaScript(OK，JScript)编写成脚本。它是如何工作的？
```
C:>edit hello.js
```
You create a file.
您创建一个文件。
```
var a = "Hello",
    b = " WSH!",
    c = a + b;
        
WScript.Echo(c);
```
Put any old JavaScript in there and print out some results
将所有旧JavaScript放入其中并打印出一些结果
```
C:>cscript hello.js
Hello WSH!
```
And this is how you run it.

这就是您的运行方式。

Or this:

或这个：
```
C:>wscript hello.js
```
```
Open apps
```
In addition to regular sysadmin tasks (copy, write files, move) you can open and script applications too.
除了常规的sysadmin任务(复制，写入文件，移动)之外，您还可以打开应用程序并编写脚本。
```
var ie = new ActiveXObject("InternetExplorer.Application");
ie.Visible = true;
ie.navigate(yahoo.com);
```
This is how you open IE and point it to a page.

这是打开IE并将其指向页面的方式。

Notice something familiar? ActiveXObject - the thing we used in IE before it got native XMLHttpRequest
注意到一些熟悉的东西吗？ ActiveXObject在获得本机XMLHttpRequest之前我们在IE中使用的东西
```
Firefox?
```
Can you also open FF?

您还可以打开FF吗？

Not really, as it doesn't have COM interface (whatever that is).

并非如此，因为它没有COM接口(无论如何)。

But there's an easy solution
但是有一个简单的解决方案
```
HTTPWatch
```
Finally we come to the topic of the talk.
最后，我们来谈谈话题。
```
Speed
```
Performance is critical for the success of any web app.

性能对于任何Web应用程序的成功都是至关重要的。

Really, it is.

真的是这样

When talking about improving speed there are two main steps:
在谈论提高速度时，有两个主要步骤：
```
1. Fix with YSlow
```
Take a slow page, run YSlow, do what it says.

慢速运行页面，运行YSlow，按照提示进行操作。

Voila - a fast(er) page.
Voila-快速页面。
```
2. No regressions
```
The second step is to not allow regressions.

第二步是不允许回归。

Whatever you fix in step 1 will be slow in the next few months.

在接下来的几个月中，您在第1步中修复的所有内容都会变慢。

Even less than months the bigger the team or the rate of changes.

甚至不到几个月，团队或变更率就会更大。

So to prevent regressions, you need to constantly...
因此，为了防止回归，您需要不断...
```
Monitor
```
```
Set limits
```
The simplest way to prevent regressions is to set some limits.

防止回归的最简单方法是设置一些限制。

If you go over the limits, an email is sent, an alarm sounds, panic instills and you've got to fix whatever cause it was.

如果超出限制，则会发送一封电子邮件，发出警报声，引发恐慌，您必须修复造成这种情况的任何原因。

e.g.
max 2 scripts
max 2 styles
max 9 images
max 0 redirects

```
Scripting HTTPWatch
```
Watching for violations of the limits manually every day is not a job anyone would want.

每天手动监视违反限制的情况并不是任何人想要的。

So automating it will help a great way towards employee satisfaction 🙂
因此，将其自动化将有助于提高员工满意度🙂
```
var http = new ActiveXObject("HTTPWatch.Controller"),
    ie = http.IE.New(),
    ff = http.Firefox.New();
```
This is how you open IE and FF with HTTPWatch's help.

这是在HTTPWatch的帮助下打开IE和FF的方式。

FF - yey!
FF-是的！
```
// browser cache
ie.clearCache();

// show HTTPWatch
ie.OpenWindow(false);
```
Examples of stuff you can do with the HTTPWatch API.

您可以使用HTTPWatch API进行操作的示例。

You can for example hit the page with empty cache and then again with full cache.

例如，您可以使用空的缓存访问页面，然后再次使用完整的缓存访问页面。

Best of all - these are the real browsers with their sometimes kinky behaviors. Actually if you setup several machines for the monitoring (or somehow do multiple IEs) you can test with different versions of the browsers. Nothing synthetic!
最重要的是-这些是真正的浏览器，有时会出现扭曲行为。实际上，如果您设置了几台用于监视的计算机(或以某种方式执行多个IE)，则可以使用不同版本的浏览器进行测试。没有合成的！
```
ie.Record();
ie.GotoUrl("yahoo.com");
http.Wait(ie, -1);
ie.Stop();
```
Start monitoring, go to a page, stop monitoring after the page "settles" meaning some time after onload.

开始监视，转到页面，在页面“定居”(表示加载后一段时间)后停止监视。
```
ie.CloseBrowser();
```
```
new HTTPWatch()
      http://github.com/stoyan/etc/
```
I did this JavaScript thingie to make everything a little easier.
我做了这个JavaScript事情，使一切变得简单。

var http = new HTTPWatch(ff);
http.go(search.yahoo.com);
http.done();

Example usage.

用法示例。

```
var har = http.toHAR();
har = eval(( + har + ));

print(har.log.browser.name);
print(har.log.browser.version);
print(# requests: );
print(har.log.entries.length);
```
Opening and navigating browsers is cool. But we need some data back.

打开和导航浏览器很酷。但是我们需要一些数据。

HTTPWatch can export a HAR (HTTP Archive) file. I have this toHAR() method. It writes the file, than reads and returns it. You can than eval() it because it's just a JSON string. And you get the data back in convenient JS objects and arrays.
HTTPWatch可以导出HAR(HTTP存档)文件。我有这个toHAR()方法。它写入文件，然后读取并返回它。您可以使用eval() ，因为它只是一个JSON字符串。然后您将数据返回到方便的JS对象和数组中。

Internet Explorer 6.0.29...
# requests: 10

Firefox 3.5.6
# requests: 15

Result of running the above.

运行上述结果。

```
var comps = http.getComponentsByType();
      
for (var i in comps) {
  print(i);
  print(comps[i].length);
}
```
Another method I thought would be useful is getComponentsByType()
我认为有用的另一种方法是getComponentsByType()

redirect: 1
text/html: 3
image/gif: 4
image/png: 3
text/javascript: 1

Results of the code above.

上面代码的结果。

```
But wait...
```
There's more 🙂
还有更多🙂
```
What about DOM?
```
So far we only talked about HTTP traffic inspection - headers and such.

到目前为止，我们仅讨论了HTTP流量检查-标头等。

Good news is that you can also inspect the DOM (in IE only) for any potential red flags.

好消息是，您也可以检查DOM(仅在IE中)是否存在任何潜在的危险信号。

For example having the number of DOM elements sharply increase.
例如，具有DOM元素的数量急剧增加。

var http = new HTTPWatch();
http.go(search.yahoo.com);

var d = http.watch.container.document;

print(d.getElementsByTagName(*).length);
print(d.documentElement.innerHTML);

That works!

这样可行！

All your DOM voodoo skillz are suddenly reusable.

您所有的DOM巫毒技能都可突然重用。

```
require(statz.js);
      
var doc = http.watch.container.document;
var html = http.har.log.entries[0].response.content.text;

var out = statz(document, html);
print(out.join("\n"));
```
This is me repurposing two old bookmarklets that gather some interesting stats (one of them was even featured on Ajaxian, remember?).

这是我重新使用两个收集了一些有趣统计信息的旧书签的功能(其中一个甚至在Ajaxian上也得到了体现，还记得吗？)。

It was pretty easy to repurpose the bookmarklets, because it's just JavaScript.

重新设置书签的用途非常容易，因为它只是JavaScript。

The stats thingie can inspect both raw HTML that went over the wire, as well as innerHTML that was the result of any additional DOM manipulations.
统计资料既可以检查通过网络的原始HTML，也可以检查由于其他DOM操作而产生的innerHTML。

JS attributes (e.g. onclick): 1207 bytes
CSS style attributes: 883
Inline JS: 5243
Inline CSS: 5015
All innerHTML: 17283
# DOM elements: 134

Total size: 14124 bytes
Content size: 401 bytes
Content-to-markup ratio: 0.03

Sample results.

样本结果。

```
To summarize...
```

JavaScript
WSH
HTTPWatch
Monitor
DOM and HTTP
IE and Firefox

```
Thanks
      
phpied.com
```

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/httpwatch-automation-javascript/

httpwatch使用