今天群里有人发问,

进入百度翻译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设备驱动归纳总结(五):3.操作硬件——IO静态映射【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-83299.html linux设备驱动归纳总结(五):3.操作硬件——IO静态映射 xxxxxxxxx ...

  2. 互联网公司前端初级Javascript面试题

    互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...

  3. Android 常用工具类之RuntimeUtil

    public class RuntimeUtil { /** 通过查询su文件的方式判断手机是否root */ public static boolean hasRootedSilent() { re ...

  4. Makefile学习之make 的运行【转】

    转自:http://blog.csdn.net/suzilong11/article/details/7852830 —————— 一般来说,最简单的就是直接在命令行下输入make命令,make命令会 ...

  5. textarea输入框限制字数(JS)

    第一种: <textarea onkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...

  6. JavaEE基础(五)

    1.Java语言基础(数组概述和定义格式说明) A:为什么要有数组(容器) 为了存储同种数据类型的多个值 B:数组概念 数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. 数组既可以存储基 ...

  7. JavaEE基础(一)

    1.计算机基础知识(计算机概述) A:什么是计算机?计算机在生活中的应用举例 计算机(Computer)全称:电子计算机,俗称电脑.是一种能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备. ...

  8. POJ 1260:Pearls(DP)

    http://poj.org/problem?id=1260 Pearls Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8 ...

  9. hibernate关于一对一用法

    首先来说一下数据库的表结构吧.主要涉及到两张表.一张是订单表sub_table 一张是商品表.       之后说entity public class SubTable { private Inte ...

  10. SQL Server 索引和表体系结构(一)

    转自:http://www.cnblogs.com/chenmh/p/3780221.html 聚集索引 概述 关于索引和表体系结构的概念一直都是讨论比较多的话题,其中表的各种存储形式是讨论的重点,在 ...