今天群里有人发问,

进入百度翻译http://fanyi.baidu.com/#auto/zh/,

输入word-wrap,发现页面错乱。

寻找错乱原因。

上图

开始查找原因:

1.从请求入手

从chrome的network面板里,能很容易找到翻译请求v2transapi。

js语句发起请求,在chrome里能看到发起这个请求的,方法调用堆栈。

2.从方法名入手

如果方法名看不出名堂,直接从最后个方法入手。这里是b6方法,点击进入。

通过chrome自带格式化工具格式化,然后开始设断点,单步调试,观察页面变化,慢慢缩小调试范围

在这里你会发现,cg[0]是word-wrap这个字符串的ajax的请求对象,cg[1]是服务器返回的结果,

cc[3]是function(S) {
D.MessageCenter.fire("TRANSLATECHECKRESPONSE", {
res: S,
to: Q
})
}

这下好办了,直接ctrl+shift+f调起chrome全局搜索,输入TRANSLATECHECKRESPONSE,找到代码设断点,再调试。你会看到里面又有个RESPONSEISBAIKEMEAN,就是它了。

最后你看到什么,word-wrap的百科示例代码,直接被append进去了。是的,没有进行转义。

百度翻译word-wrap,页面错乱原因查找过程(已修复)的更多相关文章

  1. 小白学Python——用 百度翻译API 实现 翻译功能

    本人英语不好,很多词组不认识,只能借助工具:百度翻译和谷歌翻译都不错,近期自学Python,就想能否自己设计一个百度翻译软件呢? 百度翻译开放平台: http://api.fanyi.baidu.co ...

  2. Python爬虫教程-05-python爬虫实现百度翻译

    使用python爬虫实现百度翻译功能 python爬虫实现百度翻译: python解释器[模拟浏览器],发送[post请求],传入待[翻译的内容]作为参数,获取[百度翻译的结果] 通过开发者工具,获取 ...

  3. Python爬虫教程-实现百度翻译

    使用python爬虫实现百度翻译功能python爬虫实现百度翻译: python解释器[模拟浏览器],发送[post请求],传入待[翻译的内容]作为参数,获取[百度翻译的结果] 通过开发者工具,获取发 ...

  4. 基于百度翻译API开发属于自己的翻译工具

    你是否每天使用着网页翻译工具?你是否遇到过这种情况,上网过程中遇到一个很长的单词但是又不能复制,要开两个浏览器,一个打开百度翻译,照着另一个网页输入单词?你安装了各种翻译软件后,又删除,只因忍受不了那 ...

  5. Python 调用百度翻译API

    由于实习公司这边做的是日文app,有时要看看用户反馈,对于我这种五十音图都没记住的人,表示百度翻译确实还可以.但不想每次都复制粘贴啊,google被墙也是挺蛋疼的事,所以用python结合baidu ...

  6. 百度翻译&&金山词霸API

    #/usr/bin/env python3 #coding=utf8 """百度翻译api功能实现函数,本模块基于Python3.x实现,getTransResult(q ...

  7. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  8. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  9. 百度翻译API(C#)

    百度翻译开放平台:点击打开链接 1. 定义类用于保存解析json得到的结果 public class Translation { public string Src { get; set; } pub ...

随机推荐

  1. Linux查看CPU和内存使用情况【转】

    转自:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应 ...

  2. Redis常用命令速查 02_转

    一.Key Key命令速查: 命令 说明 DEL 删除给定的一个或多个 key,不存在的 key 会被忽略,返回值:被删除 key 的数量 DUMP 序列化给定 key,返回被序列化的值,使用 RES ...

  3. awr报告生成方法

    以上是在linux的oracle的命令截图. 如果是在unix的命令,则需要在命令前面加上\符号,变成了\@$ORACLE_HOME/rdbms/admin/awrrpt.sql

  4. $(document).ready vs $(window).load vs window.onload

    原文地址: $(document).ready vs $(window).load vs window.onload $(document).ready We execute our code whe ...

  5. oracle 导出表结构和数据,使用plsql

    比如说需要把A数据库里面的数据,导入到B数据库 准备工作:在B数据库中创建B数据库同名的的用户名和表空间,注意大小写必须一样. 1,导出表结构.A数据库里点击工具栏里的tools--Export Us ...

  6. 【PHP设计模式 07_ZeRenLian.php】责任链模式

    <?php /** * [责任链模式] * 情景设置:根据不同的需求,去找相应级别的责任人解决问题 */ header("Content-type: text/html; charse ...

  7. easyui常现错误

    1.easyui-tabs:当data-options的属性设置为true时,其tab内部的内容显示不出来. 2.设置easyui-panel的title格式及字体大小无效 解决方法:在设置title ...

  8. xcode4.3 完成输入后 点击背景关闭键盘

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [self.view endEditing:YES];} 把这个复制到 ...

  9. css基本样式总结

    1:背景(background) <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  10. n条直线最多能将一个平面分成多少部分?

    f(n)=n(n+1)/2+1 原理:第N条直线可以被前N-1条直线分为N段,对于 每1段则将平面分为两份,所以对于前 f(n)=f(n-1)+n. f(n-1)=f(n-2)+n-1 ...... ...