Network: 使用Chrome进行javascript调试及执行javascript脚本

不得不说,Chrome真是个神器。最近需要在加载网页之后做一些操作,希望能够通过执行javascript脚本来实现模拟鼠标点击的操作以及在Android app开发中,希望在使用webview的时候,可以在java代码中注入javascript的代码,实现网页自动跳转的操作。

  • 修改user agent

我们知道使用不同的user agent可以加载不同风格的网页,如想在桌面浏览器中加载移动客户端的网页,可以简单地通过user agent来实现。

在chrome浏览器中,可以通过如下方式查看当前所使用的user agent:

chrome://version/

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36

而修改user agent则可以通过如下方式进行设置:

2017_06_07_chrome_user_agent

当然Chrome预置了多种的user agent。

  • 执行javascripe脚本来模拟鼠标点击的操作

这里,我们首先可以使用Chrome浏览器的inspect工具,查看我们需要进行点击操作的是哪个元素(element):

2017_06_07_chrome_github

如上图,我们想点击上图中的”See recent updates” 链接,我们通过inspect工具查看当前这个链接是属于什么元素,有什么属性:

<a href="/updates" aria-label="Read recent GitHub product updates" class="btn btn-transparent">See recent updates</a>

这里我们可以看到这是个链接,它的class name为btn和btn-transparent, 接着我们可以通过console来写脚本,获取这个elements (a):

2017_06_07_github_get_ele

可以看到,我在Console中执行了两条命令:

1. document.getElementsByClassName(‘btn’);

2. document.getElementsByClassName(‘btn-transparent’);

我通过class name来查找这个元素,如果class name为’btn’则有7个元素,而class name为’btn-transparent’则为一个元素,无论使用哪个class name, 我们都可以找到我们所需的那个元素,得到这个元素之后,我们就可以调用click()函数来模拟点击的操作了:

document.getElementsByClassName('btn-transparent')[0].click();

而当网页加载完之后,我们可以在地址栏中输入如下命令来实现同样的效果:

javascript:document.getElementsByClassName('btn-transparent')[0].click();

2017_06_07_github_js_click

  • 在Android app代码中实现这样的操作

只需要在WebView实例中执行如下方法即可:

1. https://developer.android.com/reference/android/webkit/WebView.html#loadUrl(java.lang.String)

2. https://developer.android.com/reference/android/webkit/WebView.html#evaluateJavascript(java.lang.String, android.webkit.ValueCallback<java.lang.String>)

发表评论

电子邮件地址不会被公开。 必填项已用*标注