感觉没有那个开发者工具（F12），用chrome几乎没有意义(页 1)
- 6.x版本使用交流 -
世界之窗论坛
- Powered by Discuz! Archiver
世界之窗论坛's Archiver
goian 发表于
感觉没有那个开发者工具（F12），用chrome几乎没有意义世界之窗的版本各方面我都比较满意，唯独这个开发者工具。对我做网页的人来说非常重要。。。
不知道有没有别的方法uhname 发表于
工具 查看源代码不是有吗？sunanyway 发表于
这个属于20%的功能，很可能就此被阉割了。我自己的话主力是世界之窗，要工作了就另开浏览器。goian 发表于
[b]回复 [url=/redirect.php?goto=findpost&pid=1603524&ptid=#[/url] [i]uhname[/i] [/b]
& & 光是查看代码的话，IE都可以goian 发表于
[b]回复 [url=/redirect.php?goto=findpost&pid=1603527&ptid=#[/url] [i]sunanyway[/i] [/b]
& & 是啊，所以想看看有没有办法解决。没有就算了。继续chromeodrip 发表于
从来没有用过那个键&&[twface_tk_40]uk8u8 发表于
[quote]世界之窗的版本各方面我都比较满意，唯独这个开发者工具。对我做网页的人来说非常重要。。。
不知道有没有 ...
[size=2][color=#999999]goian 发表于
23:36[/color] [url=/redirect.php?goto=findpost&pid=1603521&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
我也强烈需要，这个功能我每天至少使用10次以上。。。anyx2918 发表于
[quote]我也强烈需要，这个功能我每天至少使用10次以上。。。
[size=2][color=#999999]uk8u8 发表于
09:37[/color] [url=/redirect.php?goto=findpost&pid=1603599&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
苦逼的程序猿...........
作开发的都想要,坛子里其它人,说我们是很小很小的小众.................,估计忽略了..........uk8u8 发表于
[i=s] 本帖最后由 uk8u8 于
23:01 编辑 [/i]
[quote]苦逼的程序猿...........
作开发的都想要,坛子里其它人,说我们是很小很小的小众.................,估计 ...
[size=2][color=#999999]anyx2918 发表于
01:59[/color] [url=/redirect.php?goto=findpost&pid=1604038&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
苦逼的程序猿 +0.5
firefox，chrome，safari，opera，IE6-IE10(据说IE11要出)。这些都要装的。。 测试时用。。
F12我是每天必用的功能。。
昨天与前天我有偿试把tw6做为主浏览器(忍着折磨SSD与没有快捷键的痛苦)用。
发现bug还是非常的多的。。稳定性还不足以日常使用。。
还是继续maxthon4吧。。
另外，推荐你一下maxthon4，是一款好浏览器。。anyx2918 发表于
[quote]苦逼的程序猿 +0.5
firefox，chrome，safari，opera，IE6-IE10(据说IE11要出)。这些都要装的。。 测试 ...
[size=2][color=#999999]uk8u8 发表于
23:00[/color] [url=/redirect.php?goto=findpost&pid=1604196&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
我们没用那么多浏览器版本,一般IE7+就OK,另外是用360极速来测试的,可切换内核,只是360极速过一两分钟要向他们的服务器请求一个地址或者发送什么(fiddle可以看到),感觉不爽(其实这个极速作得不错),所以才想要换一个lengxue2006 发表于
楼主是程序猿啊，求培训uk8u8 发表于
[quote]我们没用那么多浏览器版本,一般IE7+就OK,另外是用360极速来测试的,可切换内核,只是360极速过一两分钟要 ...
[size=2][color=#999999]anyx2918 发表于
22:55[/color] [url=/redirect.php?goto=findpost&pid=1604486&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
要做兼容性测试啊。。。 各种虚拟机，各种浏览器都要装么。。uhname 发表于
[quote]楼主是程序猿啊，求培训
[size=2][color=#999999]lengxue2006 发表于
09:23[/color] [url=/redirect.php?goto=findpost&pid=1604539&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
网页设计猿chievements 发表于
[b]回复 [url=/redirect.php?goto=findpost&pid=1603524&ptid=#[/url] [i]uhname[/i] [/b]
& & 他指的是审查元素uhname 发表于
[quote]回复&&uhname
& & 他指的是审查元素
[size=2][color=#999999]chievements 发表于
23:30[/color] [url=/redirect.php?goto=findpost&pid=1604776&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
& & 没有用过chievements 发表于
虽然我常常用MX3的这个功能来添加过滤规则
这毕竟比较小众
TW6的开发思路
想做一个（对普通用户）简洁快速够用的浏览器
这个功能被砍掉很正常chgdcpk 发表于
扩展程序可以不要，开发者工具要保留uhname 发表于
[quote]扩展程序可以不要，开发者工具要保留
[size=2][color=#999999]chgdcpk 发表于
23:33[/color] [url=/redirect.php?goto=findpost&pid=1604779&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
& & 没有理由，有多少是搞网页的？chievements 发表于
[b]回复 [url=/redirect.php?goto=findpost&pid=1604779&ptid=#[/url] [i]chgdcpk[/i] [/b]
& & 这话相当于
30%用户用到的功能可以不要
5%用户用到的功能要保留...SpbDev 发表于
我也是做开发的，我想说的是，连js脚本错误都没地方查看，你还指望开发人员工具啊。开发的时候还是老实用IE最靠谱。闲了看网页再用TW吧SpbDev 发表于
另外补充一下，马桶我几乎不用，有木有开发人员工具不知道，我所知道的调用别人核心的浏览器，就猎豹提供了开发人员工具，别的都木有gt2000 发表于
:blood:其实这个可以有的,好多时都是开猎豹用F12的moccolon 发表于
自己定制规则的话，那个功能是很有必要uk8u8 发表于
[quote]另外补充一下，马桶我几乎不用，有木有开发人员工具不知道，我所知道的调用别人核心的浏览器，就猎豹提供了 ...
[size=2][color=#999999]SpbDev 发表于
00:03[/color] [url=/redirect.php?goto=findpost&pid=1604790&ptid=225008][img]/images/common/back.gif[/img][/url][/size][/quote]
这个除了tw6外，都有吧。。 我还真没有发现哪个浏览器没有的。。 哦。早期的IE除外。。
另外，马桶是有的。 只是本周的马桶，真心让我想换了。。
Powered byChrome 开发者工具使用详解
Chrome Web 开发者工具页面结构与样式浏览器开发者工具的使用是Web前端开发工程师必须要掌握技能。本文介绍的是chrome自带的开发者工具，首先从页面的结构和样式来介绍。本文的目的是介绍chrome开发者工具的基础用法。或许你用别的工具，如firebug或IE的开发者工具，但本文介绍的功能，其他对应工具上应该也有相应的功能，可以帮助你了解对比。浏览器开发者工具功能：查看元素的html结构概览页面的css，以及某一元素的样式实时编辑css来调样式查看http请求页面中运行js检测页面性能瓶颈，做性能评估查看页面在本地存储的数据浏览器开发者工具在开始讲解chrome的开发者工具前，先简单列举一下目前主流浏览器提供的开发者工具。chrome&浏览器开发者工具Chrome、chrome canary和chromium都带有该工具。safari&浏览器开发者工具safari是采用Web Inspector&库。它的更新没有chrome频繁。下载地址：/safari/打开方式，快捷键：ctrl + alt + i，或者选择菜单&工具&-&&显示web检查器&参考文档：/library/safari/documentation注意：也可以在页面想要查看的元素上，右键点击-&查看元素 打开firefox&浏览器开发者工具Firefox现在也自带了开发者工具，它的元素定位效果很好。firebug，任然可以以插件的形式安装。IE&浏览器开发者工具下载地址：/ie打开快捷键：F12参考文档：/en-us/library/dd565628注意：安装 chrome frame，chrome的浏览器开发者工具在IE下也可用opera浏览器开发者工具-dragonfly下载地址：/browser/打开快捷键：ctrl + shift + i参考文档：/dragonfly/documentation/注意：dragonfly是opera浏览器的一部分注意，本教程中是以chrome canary，所以介绍的一些特性在beta和稳定版中可能没有。在开始介绍元素面板前，先介绍一下头部和底部的一些功能。上图标记点介绍：1、关闭开发者工具的按钮2、选择面板的标签项3、用户自定义的一个第三方扩展应用-PageSpeed4、可以调整开发者工具的布局5、显示/隐藏控制台6、点击后可在页面中选择元素7、页面js报错信息8、打开/关闭设置面板可以根据个人习惯来调整开发者工具的位置。点击上图标记4的按钮来切换开发者工具的位置，使它可以如下图那样显示：元素面板展现浏览器渲染后的html结构。页面js操作dom后的结果也会实时展现。如下截图：1、Html结构树2、三角型表示该元素有子元素。三角型的不同方向表示展开或折叠3、元素面包屑，从根节点开始，到选中的当前元素。鼠标滑过相应节点，页面中会高亮相应的节点区域4、可拖动的分割线，风格html结构树和css样式信息5、可展开折叠的模块，包括css样式信息和其他6、计算后的样式板块-展示选中元素的样式信息7、处理是否显示元素从浏览器中继承过来的样式8、显示用户的样式，如页面中引用的styles.css文件，或通过js设置的样式，或者通过开发者工具添加的样式9、添加新规则&可以给选择的元素添加样式10、触发元素状态，可以设置元素的状态，如hover（用户鼠标滑过元素的效果），actice等。截图中对应的按钮icon表示点击触发后，默认状态是关闭的11、可以设置颜色显示格式。可以设置为用户自定义的、hex、RGB或HSL12、显示元素的和模型元素面板可以查看和编辑元素和其样式。打开开发者工具，点击第一个标签项,也可以通过在页面元素上右键点击&&查看元素。有很多用途，可以编辑或添加新元素节点；可以查看元素样式信息，并且可以对样式进行添加、删除等操作。DOM&编辑在元素面板中编辑dom很简单。删除节点只需简单邮件点击节点 选择 &删除节点&。删除父节点，子节点也会被删除。小提示：也可以通过键盘的 delete键 删除选择的节点。双击节点可以修改节点的类型。如下图，修改p节点。事实上，修改节点的开始标签类型，其对应的闭合标签类型也会同时改变。添加属性添加属性，右键点击元素选择&添加属性&。光标焦点放到你想要添加属性的元素上，然后输入你想要添加的属性。例如，添加class=&title&。通过键盘的tab键可以切换到下一个属性进行编辑。编辑属性编辑属性和添加属性一样，在想要编辑的属性或属性值上双击即可编辑。修改输入框中会高亮你双击的属性或属性值。编辑HTML编辑html只需要选择相应节点右键点击 选择&编辑HTML&。开发者工具提供了很好的页面元素定位功能。在元素面板中鼠标滑过浏览器渲染的html结构树时，页面中对应的的元素区域会高亮显示。这非常方便于在html结构树上定位页面元素。当然如果鼠标滑过的节点对应在页面中的区域不在浏览器的可视区域中就看不到高亮了。但这中情况下页面会在元素相应的方位上显示一个提示框。也可以右键点击元素，选择&滚动到可视区域&，则对应元素区域会滚动到浏览器的可视区域中。开发者工具还有搜索功能。当工具面板获得焦点后，快捷键ctrl+f会打开搜索框。如在输入框中输入&body&就会快速找到页面中的第一个body。查看样式信息在介绍元素面板右侧的样式面板前，先给一个元素同时设置margin、padding和border，在鼠标滑过该元素时你会看到如下的盒模型。如果发现有浮动元素显示的和模型有问题，可以通过样式面板区域的&盒模型&模块来查看元素的margin、padding、border&。如果没有学习或了解css盒模型，那么它是一个学习盒模型的好帮手。它告诉你元素是怎么渲染的，找到问题的原因。该面板可以查看元素尺寸、padding、border和margin的值，单位是px。鼠标滑过各个区域时页面中会高亮显示相应的区域。设置样式信息如下图展开样式面板。在空白处点击，光标会自动定位到输入框开始设置样式。输入属性名，按tab键就会自动聚焦到属性值的输入框，然后输入想要的值。border:1pxsolidgreen&在编辑样式属性名或属性值值时，输入有自动完成功能，可以通过tab键或键盘向右箭头来补全你所选择的。当输入的属性值单位为px或百分比时，可以通过键盘的向上、向下键来增加和减小数值，还可以通过组合键shift+向上/向下键以10倍的值增加或减小。编辑颜色值时，可以直接输入颜色值，也可以通过点击颜色小方块弹出的取色面板来选择颜色。还可以按shift点击颜色小方块来切换颜色值的模式。可以通过点击+号icon来给某个元素添加样式，例如元素如下：&h1&id="something"&Hello&/h1&点击+号icon后会自动添加一条规则如下：#something { }如果html如下：&h1&class="some-class"&Hello&/h1&那么所对应的规则如下：.some-class { }若html结构如下：&h1&Hello&/h1&则会增加如下一条：.h1{ }那如果元素有多个class如下：&h1&class="class1 class2 class3"&Hi there&/h1&会生成一条如下：.class1&.class2&.class3{ }这些生成的规则也可以编辑。资源面板展示了页面中的所有资源。下图是资源面板截图：1、资源面板tab；2、左侧栏分类列出页面资源。如&框架&、&session存储&，如果前面有箭头点击展开还可以看到更多信息。注意左侧栏的大小是可以调整的；3、页面资源包括字体、图片、js、css和页面本身。如果页面中有frame或iframe，展开Frames会看到其对应的frame和iframe。页面层次结构更清晰4、数据库显示页面相关的SQL数据库数据信息；5、相应IndexedDB 也展示页面的IndexedDB 信息；6、以键/值 形式列表展示本地存储的数据；7、以键/值列表显示session存储数据；8、根据域名列举cookie；9、显示通过manifest缓存的资源。包括很多信息，如js库文件会显示文件地址、大小和类型；10、右侧用来显示每个资源对应的详细信息。注意，可以修改编辑资源信息，如编辑本地存储的数据，来调试页面资源。查看页面中框架中的内容虽然现在由frame组成的页面越来越少见了，但查看框架内容的方法还是有必要了解的。下面截图，是一个由frame组成的页面。每个frame都相关的资源都在一个文件夹下，同样点击展开可以了解页面的资源、js、css、图片文件和字体情况。点击选中一个框架，页面中其对应的区域会高亮显示。注意：不会列出系统已有的，如&arial&&Helvetica&等，只会列出浏览器需要下载安装的如上图，对应的字体会显示在右侧，字体大小会根据右侧区域大小来调整大小。如上图，对应图片会在右侧显示，图片大小也会根据右侧区域大小来自适应。如果图片有透明，透明部分会显示成棋盘格子来表示透明。图片信息，如图片大小、文件大小和图片格式会在图片下面显示。点击脚本文件，文件内容会如实显示在右侧。如上图，格式难以阅读，后续教程会详细介绍如何查看格式化后的js代码。可以查看页面加载的所有css文件。同查看js文件方法一样。但通常不会从这里来查看样式。如下图：加载失败的资源偶尔，浏览器下载资源失败或者代码出错如上图，出错的资源右侧会显示一个红色标记，数字表示出错的个数，点击资源，右侧会显示出错信息。保存和查看资源右键点击资源会出现菜单，如下图:可以选择保存该资源，也可以选择在新标签页中查看，当然也还可以做些别的。双击资源会在新标签页中打开资源。cookies&查看某个网站的cookie信息。如图，访问twitter，然后通过资源面板查看cookie信息。[name]-字段名。如字段名为&remember_checked&,其值为1，这可能说明用户在登陆的时候选择了记住我；[value]-字段所对应的值。如&_twitter_sess&所对应的值为一串加密了的session ID；[domain]-cookie所在的域。上图的&.&表明其子域也是可以访问该cookie的；[path]-跟域相同，设置有效的路径。设置为&/&表明允许所在路径下都可以访问cookie；[expires]-浏览器可以删除该cookie的日期；[size]-cookie的大小，单位bytes；[HTTP]-cookie的访问允许HTTP协议。这可以防止跨站js获取cookie攻击；[secure]]-只允许加密连接访问cookie，如HTTPS；可以通过右键菜单，选择&删除&来删除所选cookie。下图是查看本地存储信息的截图:当用户第一次访问该页面时，浏览器会下载css文件。再次刷新该页面感觉快了些，因为它将css存在了本地存储中。厨房水槽应用中有了一些字段，如下:3a867610-670a-11e1-a90e-4318029d18bb-/deploy/touch/examples/production/kitchensink/resources/css/app.css/*45e6f4ffef3dcbfc156025eca58e4f5*/code,pre,pre&*{font-family:Menlo,Monaco,Courier,monospace}Steve Souders有一篇文章关于静态资源的本地存储&。在移动设备上应用本地存储对提升性能很有效。缓存应用可以查看浏览缓存了哪些资源。如下图：&& 文章转载于 软件盒子&&
最新教程周点击榜
微信扫一扫»»你所不知道的10个“Chrome开发者工具”使用技巧
　　今天给大家分享一些使用&Chrome开发者工具&的小技巧。包括调试，优化页面渲染速度等。希望能提升Web开发人员的工作效率。
　　1，打开Shadow DOM显示
　　浏览器对例如Video、Password等组件进行了封装，无法查看到组件的详细代码，不利于调试。幸好，通过配置能够在元素标签器中显示被隐藏的组件代码。
　　实现：Settings&&&General&&&Elements&&&Show&user&agent&shadow&DOM
　　2，在控制台快速选择元素,
　　在Chrome Dev Tools 控制台中还可以通过$变量来选择DOM元素：
$：Chrome控制台中原生支持类jQuery的选择器。用$加上熟悉的css选择器就能选择DOM节点。
$0 ~ $4：最近选择过的5个DOM节点。$0会返回最近一次点选的DOM结点。以此类推，$1返回的是上上次点选的DOM节点。最多可以保存5个，如果不满5个，则返回undefined。
　　3，多行插入符编辑内容
　　在Sources编辑框中，按住Ctrl（Cmd for Mac），在要编辑的地方点击鼠标，可以设置多个插入符。按下Ctrl + U 撤销编辑，快速输入，快速删除。
　　4，使用&3步快照&技术来找出JavaScript内存泄露
　　1，打开开发者工具并且切换到Profiles面板里；
　　2，在页面执行一个能引起内存泄露的操作；
　　3，点击&Take Snapshot&来执行一个堆快照；
　　4，重复执行步骤 2 和步骤 3 三次；
　　5，选择最后一个堆快照；
　　6，将过滤器从&所有对象&改为&快照 1 和 2 之间的对象&；
　　现在应该已经可以看到一组新的泄露对象的集合，选择其中的一个然后查看是什么导致的内存泄露。
　　5，强制改变元素状态
　　实现：
Elements面板右侧Styles标签&&&Toggle&Element&State
Elements面板左侧右击&&&Force&element&state
　　6，快速查找文件&搜索特定字符串
　　实现：Sources面板下&Ctrl+P（Cmd+P&for&mac）
　　开发者工具支持在源代码中搜索特定的字符串的功能，这种搜索方式不但能区分大小写，还支持正则表达式。
　　实现：Sources面板下&Ctrl&+&Shift&+&F（Cmd&+&Shift&+&F&for&mac）
　　7，多列内容选择&匹配相同选项
　　实现：
　　多列内容选择：按住Alt键，当鼠标箭头变为&+&号后，点击鼠标
　　匹配相同选项：选中需要匹配的元素，快捷键Ctrl&+&D（Cmd&+&D&for&mac）
　　8，改变颜色模式&自定义调色板
　　开发者工具支持在rgba、hsl和hexadecimal来回切换颜色模式和实时编辑预览页面颜色。
　　实现：
　　改变颜色模式：Shift&+&点击鼠标
　　自定义调色板：点击样式区域颜色前面的小方块
　　9，设备模式&移动仿真
　　开发者工具能够模拟不同移动设备，快速测试移动端的用户体验，解决调试困难的问题。
通过模拟不同的屏幕大小和分辨率来测试响应式的设计效果， 也可以模拟Retina 屏幕；
使用网络模拟器来评估你的站点的性能，并且不会影响到其他选项；
可视化并审查 CSS 样式；
准确模拟设备输入，比如触控事件、地理位置以及设备屏幕朝向。
　　设备模式的另一个很酷的功能是模拟移动设备的传感器，例如触摸屏幕和加速计，甚至可以更改你的地理位置。
　　实现：Esc键&&&Emulation&&&Enable&emulation&&&Sensors
　　10，Workspace编辑本地文件
　　Workspace把开发者工具变成了一个真正的IDE。将Sources选项卡中的文件和本地项目中的文件进行匹配，直接编辑和保存，不必复制/粘贴到编辑器。
　　实现：Source左侧面板下右击&&&Add&Folder&to&worksapce
验证消息：Admin10000
提示：常上QQ空间的朋友可关注，精彩内容不错过。
理智评论文明上网，拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！