• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
前端调试工具,编码相关,性能相关
 

前端调试工具,编码相关,性能相关

on

  • 1,603 views

前端调试工具,编码相关,性能相关

前端调试工具,编码相关,性能相关

Statistics

Views

Total Views
1,603
Views on SlideShare
1,603
Embed Views
0

Actions

Likes
9
Downloads
132
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • necesito aprender ingles....urgente
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    前端调试工具,编码相关,性能相关 前端调试工具,编码相关,性能相关 Presentation Transcript

    • 前端调试、编码、性能 2011-04-06
    • • 拔赤 淘宝前端开发工程师 http://jayli.github.com
    • 我们都是善良的 Web Developer
    • BUT…• 又要检查标签配对• 每次修改脚本,传到测试环境才看到效果• 调试压缩后的脚本• 根据IE丑陋的报错定位到错误位置• 缓存总是在捣乱• 有没有工具来批量压缩脚本• …
    • Firebug• firefox 插件• 调试样式、布局• debug JavaScript• 查看网络情况• 一批基于firebug的插件扩展
    • 选中DOM高光显示选取DOM元素 选中DOM元素的样式 DOM的HTML代码 选中DOM元素的 DOM方法
    • 执行过的js代码会显示在这里 执行结果键入js代码后回车可以看到运行结果
    • 4,脚本继续执行 断点控 的控制 制面板1,选择要调试的脚本文件2,先设置断点,然后刷新页面 预览当前堆栈中 的变量 3,鼠标hover当前行的变 量,可以查看变量的值
    • 请求列表 选择请求类型 请求队列 单个请求的详情
    • Fiddler• 监控http请求• 劫持http包,修改http头等信息• 做本地文件映射
    • HTTP请求详情截获到的HTTP请求
    • 本地文件映射
    • YSlow• 监控页面性能• 查找页面瓶颈• 辅助调试页面
    • 点击此处开始
    • 页面性能评分查看页面瓶颈
    • 页面缓存后重量页面重量
    • 语法检查报告检查JS语法
    • 展开后的脚本展开js脚本
    • 图片优化
    • 下载优化后的 图片成 每张图片的压 缩比例
    • IE Developer ToolBar• 调试IE下的布局、样式• 模拟ie7、8的渲染效果
    • 操作菜单 跟踪元素样式选取页面元素 查看DOM
    • 页面中会高亮显示 每个class和id 查看容器的 class和id
    • 窗口中显示div的边界 查看页面中的div轮廓
    • 测试不同的分辨率
    • 脚本控制台面板继续执行的控制 查看执行结果设置断点,刷新页面 输入执行语句并回车
    • 查看当前堆栈中的变量 输入要查看的变量
    • 探测器面板,查看特定时间 段函数执行情况
    • HTTP Watch• 查看页面渲染关键时间点• 兼容firefox和ie• 查看 http 瀑布
    • http请求队列 红线:DomReady时间绿线:首次渲染时间 页面加载的关键时间点 和http请求状态详情
    • Chrome Developer Tools• 调试更多高级特性(html5/本地存储)• 调试CPU和内存的使用率• 查看页面的reflow
    • 查看页面的reflow
    • 特定时间内 内存消耗情况
    • 特定时间内CPU消耗情况
    • 人人都是Ninja!
    • 压缩后的js文件报错 用IEDeveloperToolBar看看先压缩后的代码无法直接debug
    • http://a.tbcdn.cn/s/kissy/1.1.7/??uibase/uibase-pkg-min.js,dd/dd-pkg-min.js,overlay/overlay-pkg-min.js,editor/editor-all-pkg-min.js,editor/biz/ext/editor-plugin-pkg-min.js 这种合并后的脚本引用怎么用 fiddler替换?
    • 开动脑筋
    • 我们需要一个本地环境,模拟 combo,通过本地 展开的js进行调试
    • • IE对乱码极其敏感• 浏览器缓存是否清除• JS代码是否通过了语法检查(JSLint)•…
    • 前端性能!
    • 我们的标准!
    • 编码?性能?To be continue…
    • ref• http://www.stevesouders.com/• http://getfirebug.com• http://developer.yahoo.com/yslow/• http://www.fiddler2.com/fiddler2/• http://www.httpwatch.com/