- <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>FeHelper配置项</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/css/fe-opt.css" />
<script type="text/javascript" src="../static/js/core/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../static/js/mod/mod_options.js"></script>
</head>
<body>
<header class="fe-opt-header">
<div class="top">
<img src="../static/img/fe-128.png" alt="" />
<span class="text">FeHelper配置项</span>
<span class="copy-right">©2014 <a href="http://www.baidufe.com">Baidufe</a></span>
</div>
<div class="bar">
<span class="text">增强选项</span>
<span class="btn" id="btn_close">关闭</span>
<span class="btn" id="btn_save">保存</span>
</div>
</header>
<section class="fe-opt-content">
<div class="left">
<ul id="fe-opt-list-item">
<li data-content="#opt_start" class="selected">启动选项</li>
<li data-content="#opt_json">JSON格式化工具</li>
<li data-content="#opt_fe_html">HTML检测</li>
<li data-content="#opt_fe_css">CSS检测</li>
<li data-content="#opt_fe_js">Javascript检测</li>
<li data-content="#opt_grid">栅格检测</li>
<li data-content="#opt_endecode">字符串编解码</li>
<li data-content="#opt_loadtime">统计网页加载耗时</li>
<li data-content="#opt_qrcode">二维码生成工具</li>
<li data-content="#opt_beautify">代码美化工具</li>
<li data-content="#opt_timestamp">时间(戳)转换工具</li>
<li data-content="#opt_regexp">正则表达式工具</li>
</ul>
</div>
<div class="right">
<!-- 启动项 -->
<div id="opt_start" class="selected">
<form action="#" id="opt_form_start">
<div class="title">请进行FeHelper高级配置>></div>
<ul class="no-list-style">
<li>
<input type="checkbox" name="opt_item_contextMenus" id="opt_item_contextMenus" value="opt_item_contextMenus" />
<label for="opt_item_contextMenus">将“FeHelper-FE助手”添加到右键菜单</label>
</li>
<li>
<hr />
</li>
<li>
<select name="opt_item_notification" id="opt_item_notification">
<option value="3000">3秒</option>
<option value="5000" selected>5秒</option>
<option value="8000">8秒</option>
<option value="10000">10秒</option>
<option value="20000">20秒</option>
<option value="30000">30秒</option>
</select>
<label for="opt_item_notification">设置桌面提醒的自动关闭时间</label>
</li>
</ul>
</form>
</div>
<!-- HTML检测 -->
<div id="opt_fe_html" class="fe-hide">
<form action="" id="opt_form_html">
<div class="title">HTML检测完成如下功能>></div>
<ul>
<li>
<label for="">检测DOCTYPE是否符合标准</label>
</li>
<li>
<label for="">检测是否存在HTML5已经不支持的标签</label>
</li>
<li>
<label for="">检测是否存在对HTML5已经不支持的属性</label>
</li>
<li>
<label for="">检测是否存在有重复命名的ID</label>
</li>
<li>
<label for="">检测是否存在inline标签包含block标签</label>
</li>
<li>
<label for="">检测是否存在未闭合的HTML标签</label>
</li>
<li>
<label for="">检测是否存在<head>标签之外包含的link[rel=stylesheet]</label>
</li>
<li>
<label for="">检测当前HTML文档是否经过压缩</label>
</li>
<li>
<label for="">检测当前页面总共的DOM节点数</label>
</li>
<li>
<label for="">检测是否存在HTML注释、仅IE支持的HTML注释、FF不支持的HTML注释‘--’</label>
</li>
<li>
<label for="">检测是否存在使用了size属性的input标签</label>
</li>
<li>
<label for="">检测<head>标签中<title>标签的数量</label>
</li>
<li>
<label for="">检测是否存在src为空的<img>标签</label>
</li>
<li>
<label for="">DOM节点最大嵌套深度检测</label>
</li>
</ul>
</form>
</div>
<!-- CSS检测 -->
<div id="opt_fe_css" class="fe-hide">
<form action="" id="opt_form_css">
<div class="title">CSS检测完成如下功能>></div>
<ul>
<li>
<label for="">对所有<style type="text/css"></style>标签内的CSS进行检测，检测每个CSSRule的使用情况</label>
</li>
<li>
<label for="">对所有<link rel="stylesheet" href="*" />引入的CSS文件进行检测，检测每个CSSRule的使用情况</label>
</li>
<li>
<label for="">检测所有<link rel="stylesheet" href="*" />引入的CSS文件是否经过压缩</label>
</li>
<li>
<label for="">检测CSS文件中总共引用的图片数量（建议CSS Sprites）</label>
</li>
<li>
<label for="">检测CSS文件中是否存在expression</label>
</li>
<li>
<label for="">对重复引入的CSS文件进行检测（包括路径相同和内容相同）</label>
</li>
</ul>
</form>
</div>
<!-- JS检测 -->
<div id="opt_fe_js" class="fe-hide">
<form action="" id="opt_form_js">
<div class="title">Javascript检测完成如下功能>></div>
<ul>
<li>
<label for="">计算当前页面的cookie大小</label>
</li>
<li>
<label for="">检测并管理当前页面所属域的有效cookie</label>
</li>
<li>
<label for="">对所有<script>标签进行检测，统计标签数量</label>
</li>
<li>
<label for="">检测通过<script src="*"></script>引入的Javascript文件是否经过压缩</label>
</li>
<li>
<label for="">检测tangram文件的个数、版本</label>
</li>
<li>
<label for="">对重复引入的JS文件进行检测（包括路径相同和内容相同）</label>
</li>
</ul>
</form>
</div>
<!-- 栅格检测 -->
<div id="opt_grid" class="fe-hide">
<form action="" id="opt_form_grd">
<div class="title">栅格检测完成如下功能>></div>
<ul>
<li>
<label for="">在页面顶部和左侧显示标尺</label>
</li>
<li>
<label for="">在页面显示辅助参考线</label>
</li>
<li>
<label for="">显示鼠标当前位置坐标</label>
</li>
<li>
<label for="">在页面显示栅格，辅助FE进行栅格检测</label>
</li>
</ul>
</form>
</div>
<!-- 字符串编解码-->
<div id="opt_endecode" class="fe-hide">
<form action="" id="opt_form_endecode">
<div class="title">字符串编解码工具完成如下功能>></div>
<ul>
<li>
<label for="">对字符串进行Unicode编码</label>
</li>
<li>
<label for="">对字符串进行UTF-8编解码</label>
</li>
<li>
<label for="">对字符串进行Base64编解码</label>
</li>
</ul>
</form>
</div>
<!-- 统计网页加载耗时 -->
<div id="opt_loadtime" class="fe-hide">
<form action="" id="opt_form_loadtime">
<div class="title">统计网页加载耗时工具完成如下功能>></div>
<ul>
<li>
<label for="">统计DNS解析的耗时</label>
</li>
<li>
<label for="">统计建立连接的耗时</label>
</li>
<li>
<label for="">统计Request的耗时</label>
</li>
<li>
<label for="">统计Response的耗时</label>
</li>
<li>
<label for="">统计内容加载的耗时</label>
</li>
<li>
<label for="">统计DOM解析的耗时</label>
</li>
<li>
<label for="">统计事件绑定的耗时</label>
</li>
</ul>
</form>
</div>
<!-- 二维码-->
<div id="opt_qrcode" class="fe-hide">
<form action="" id="opt_form_qrcode">
<div class="title">二维码生成工具完成如下功能>></div>
<ul>
<li>
<label for="">对普通网址生成二维码</label>
</li>
<li>
<label for="">对文本串生成二维码</label>
</li>
<li>
<label for="">对通讯录生成二维码</label>
</li>
<li>
<label for="">对电话号码生成二维码</label>
</li>
<li>
<label for="">对短信、彩信生成二维码</label>
</li>
</ul>
</form>
</div>
<!-- JSON-->
<div id="opt_json" class="fe-hide">
<form action="" id="opt_form_json">
<div class="title">JSON格式化工具完成如下功能>></div>
<ul>
<li>
<label for="">页面内容自动JSON格式化查看</label>
</li>
<li>
<label for="">JSON代码格式化工具</label>
</li>
</ul>
</form>
</div>
<!-- code-->
<div id="opt_beautify" class="fe-hide">
<form action="" id="opt_form_beautify">
<div class="title">代码美化工具完成如下功能>></div>
<ul>
<li>
<label for="">对Javascript代码进行美化并高亮显示</label>
</li>
<li>
<label for="">对CSS代码进行美化并高亮显示</label>
</li>
<li>
<label for="">对HTML代码进行美化并高亮显示</label>
</li>
</ul>
</form>
</div>
<!-- code-->
<div id="opt_timestamp" class="fe-hide">
<form action="" id="">
<div class="title">时间戳转换工具完成如下功能>></div>
<ul>
<li>
<label for="">时间到时间戳的转换</label>
</li>
<li>
<label for="">时间戳到时间的转换</label>
</li>
</ul>
</form>
</div>
<!-- code-->
<div id="opt_regexp" class="fe-hide">
<form action="" id="">
<div class="title">正则表达式工具完成如下功能>></div>
<ul>
<li>
<label for="">正则表达式的及时测试</label>
</li>
<li>
<label for="">常用正则表达式的汇总</label>
</li>
<li>
<label for="">匹配结果的高亮显示</label>
</li>
</ul>
</form>
</div>
</div>
</section>
<footer class="fe-opt-footer"></footer>
</body>
</html>
|
