跳到主要内容

20种新的开发技术

随着五个浏览器定期发布更大更好的嵌入式开发人员工具版本,Web开发人员的前景从未如此乐观。这些工具对于构建,调试,分析和优化我们的网站和Web应用程序是必不可少的。

近年来,Chrome和Firefox DevTools以极快的速度进行了创新,以提供卓越的调试环境。微软的Edge也向前迈出了一大步,Opera的工具现在与Chrome完全一致。

以下是20条提示,可帮助您从DevTools获得更多信息。

01.展开所有节点

Don’t forget you can press the ‘Pretty Print {}’ icon to un-minify source JavaScript in Chrome and Opera

不要忘记您可以按“漂亮打印{}”图标来缩小Chrome和Opera中的源JavaScript

“元素”面板显示当前页面的文档对象模型(DOM)树,是我们点击时显示的第一个面板F12在Windows或CMD + ALT +我在Mac上。在Firefox中,此面板称为Inspector,而在IE / Edge中,它称为DOM Explorer。

右键单击页面并检查元素时,DOM树会自动展开,以在窗格中显示该元素。我们还可以使用每个元素左侧的三角形箭头向下钻取DOM树。在Chrome,Firefox,Opera和Safari中,按住Alt键同时单击该三角形以打开一个封闭元素将扩展下方的每个节点,为您提供所有元素的子节点的快速和完全可见性。

02.移动元素

您可以在DOM树中拖放元素以更改它们在文档中的位置。只需单击并将元素拖动到所需位置,就会出现一条线条,显示它将放置的位置。

03.增加CSS值

应用于DOM中元素的样式显示在DOM树右侧显示的“样式”面板中。在Firefox中,此面板称为规则。从中,您可以修改当前应用于元素的任何CSS属性的值,以及添加新属性和值。

我们可以使用光标键调整数值属性值,如边距,填充,边框,宽度,高度,旋转甚至颜色。向上或向下键将以1为单位递增或递减值。按住转移按下键向上要么将持有的单位改为10Alt键键将更改单位为0.1。在Chrome和Opera中,您还可以使用鼠标滚轮来调整值。

04.查看Box模型

CSS Box模型描述了每个元素占用的空间,包括边距,填充,边框,宽度和高度。渲染引擎使用这些值来计算元素占用的矩形空间,并最终计算页面的布局。

作为现代Web开发人员,我们通常通过配置Box模型来简化布局计算,因此边框和填充包含在width和height值中。我们使用以下CSS:

Body * {box-sizing:border-box; }

通过在DOM树中选择的元素,我们可以在“样式/规则”面板中查看此元素的CSS Box模型。在Chrome和Opera中,可以在Computed选项卡下找到它。在Firefox中,它位于Box Model选项卡中;在Safari中,选项卡称为度量标准,在IE / Edge中,它称为布局。

将鼠标悬停在Box模型图上,Chrome,Firefox或Opera会将彩色阴影应用于页面上的相关元素和属性,以便您可以直观地显示布局。您只需单击并更改它们即可编辑Box模型的值。

05.样式伪类

我们可以强制显示CSS伪类:徘徊:焦点来自DevTools。这使我们能够设置和调试这些元素状态,而无需与它们进行交互。

“样式/规则”面板的顶部是一个图标,用于启用其他状态。根据浏览器的不同,图标可以是图钉图标,三个小方框,也可以是字母':hov'或'a:'。

在Safari中,右键单击Elements面板的DOM树视图中的元素将显示一个菜单栏,其中“Force pseudo-classes”是一个选项。

在Chrome,Firefox和Opera中,每当我们打开伪状态时,元素旁边都会出现橙色指示。该:之前:后可以在Chrome和Opera的主要样式列表下找到元素的伪样式。

06.影响CSS

在Chrome和Opera中,长时间悬停在“样式”面板中的特定CSS选择器上将突出显示页面上的使用位置。选择一个元素后,我们可以打开和关闭各个CSS类,看看它们的样式。只需在“样式”面板中切换“.cls”选项,然后选中并取消选中每个类名。

07.挑选颜色

The colour picker in Chrome allows for the creation of custom palettes

Chrome中的颜色选择器允许创建自定义调色板

Chrome,Opera,Firefox和Edge都提供了颜色选择器,使您可以选择和定义页面的颜色。要访问颜色选择器,请单击“样式”面板中任何颜色属性旁边的样本。

在Chrome和Opera中,您可以使用箭头图标旁边的值来切换十六进制,RGBa和HSLa之间的颜色值。您还可以在Chrome,Opera和Edge中查看显示已在页面上使用的颜色的调色板,以及创建包含Material Design颜色的自定义调色板和调色板。

08.停靠DevTools

每个开发人员工具都可以重新定位到以下三个选项之一:停靠到底部,停靠在右侧或单独的窗口。对接选项可以在DevTools的右上角(或Safari中的左上角)找到。键盘快捷键为Cmd + Shift + D将切换Chrome,Firefox和Opera中最后两个选项。在边缘,按Ctrl + P将在对接到底部和单独的窗口之间切换。

09.检查媒体查询

Chrome’s Responsive Design Mode has an assortment of features

Chrome的响应式设计模式具有各种功能

我们可以使用响应式设计模式查看我们的网页在不同屏幕尺寸上的显示方式。在Chrome和Opera中,按下顶部栏左侧的设备图标即可切换;而在Firefox中,图标是一个调整大小的方块。

Firefox提供了一系列不同的宽度和高度组合,可以在下拉字段中输入以添加其他尺寸。 IE和Edge提供类似的选项来更改“仿真”面板中的显示大小。

除了设备列表和自定义功能外,Chrome和Opera还提供了一个额外的媒体查询检查器(位于“更多选项”>“显示媒体查询”下),使您可以在每个断点之间快速查看和更改。这些浏览器还提供节流网络速度和调整往返时间(RTT)以模拟较慢网络的能力。

10.启用实验

DevTools中有许多额外功能尚未为主流版本做好准备,但可以提供一些额外的调试功能,只要您愿意接受它们可能不稳定。

通过在Chrome中的地址栏中键入“chrome:// flags”(或Opera中的“opera:// flags”),然后在“启用开发人员工具实验”选项上点击“启用”来启用它们。然后可以在“实验”选项卡下的“设置”菜单中打开和关闭新功能。

当前的实验包括Accessibility和Promise检查器,以及用于更改边距和填充的布局编辑器(可从“样式”面板访问)。在“实验”选项卡上按六次Shift键可以在Chrome DevTools中找到更多实验性功能。这些包括在颜色选择器中显示对比线的实验; CPU限制并在时间轴面板上显示GPU数据图。

Firefox还允许用户从其设置菜单中单独打开实验性功能。

11.调试动画

Chrome’s FPS meter and new Animation Inspector in action

Chrome的FPS仪表和新的动画检查器正在运行中

有时调试CSS动画可能很困难,但Chrome,Firefox和Opera已将注意力转移到使这个过程更容易。每个都提供了新功能,使您可以分析动画的播放和协作方式。

要在Chrome和Opera中以不同的速度播放和重放动画,请使用可从控制台托盘访问的动画面板(按Esc切换打开)或Firefox中的动画面板。

控件允许调试CSS转换,CSS动画和Web动画API。在Chrome / Opera的Animations面板中,还有动画时序和延迟的实时编辑,以及用于进一步调试的拖放界面。

12.调试动画缓动

除了包含缓动属性的每个CSS过渡和动画样式外,您还可以找到一个样本。单击此按钮将打开一个带有预定义缓动选项的缓动调试菜单,以及一个允许更多自定义和实时预览的图形工具。

13.监控事件

Console面板非常适合记录有关您网页的调试信息并输入JavaScript以与文档进行交互。在Chrome,Opera和Safari中,它还可用于监控和记录事件。

要监控特定事件,请使用:

MonitorEvents(elem,'eventType');

哪里ELEM是你想要监控的元素事件类型是事件(例如,老鼠点击KEYDOWN触摸调整要么滚动)。如果当前在“元素”面板中选择了要监视的元素,则可以使用$ 0访问它。

要停止监视事件,请使用以下命令:

UnmonitorEvents(ELEM);

14.重新运行控制台命令

在“控制台”面板中运行命令后,只需按向上箭头即可显示以前控制台命令的历史记录。要重新运行一个,请按Enter键。

15.改变帧焦点

Firefox’s DevTools have caught up with Chrome’s, offering a ton of great features and functionality

Firefox的DevTools已经赶上了Chrome,提供了大量优秀的功能

如果您的网页包含一个或多个iframe(通常是CodePen,JS Bin和JSFiddle等工具的情况),从控制台内调试正确的框架可能是一个挑战。您可以从DevTools控制台中定位框架,方法是从Chrome和Opera控制台窗口顶部的下拉列表中选择框架;或者使用Firefox菜单栏右上角的框架选择图标。 Safari提供与控制台命令行右侧相同的选项。

16.模拟地理定位

可以在Emulation菜单中的Edge中模拟地理定位。在Chrome和Opera中,可以通过从右侧菜单中选择更多工具>传感器来模拟地理位置和加速度计。地理定位允许您使用另一组经度和纬度坐标覆盖您的位置,或模拟不可用的位置。

17.模仿方向

可以在与Chrome和Opera中的地理位置相同的面板中找到加速度计仿真。这允许您更改设备方向的alpha,beta和gamma值:

Α表示设备绕Z轴从0到360度的运动

Beta版表示设备围绕X轴从-180度到180度的运动,类似于前后运动

伽玛表示设备围绕Y轴从-90度到90度的运动,类似于从左到右的运动

更改值将触发aDeviceorientation事件,您可以测试:MonitorEvents(window,'deviceorientation');

18.运行绩效审计

Find quick wins for improving performance on your website with the Audits panel

使用“审核”面板,快速获得改善网站性能的信息

您无需成为网络流量和网页呈现方式的专家,就可以找到有关如何加快网站速度的有用提示。 Chrome和Opera都提供审核功能,并提供有关如何改善网络和页面性能的建议。

要运行审核,请选择“审核”面板,选择要执行的测试,然后单击“运行”。网络审核将识别您网站负载的瓶颈(例如大图像大小);而性能审核将确定加速页面的方法(例如删除未使用的CSS规则)。

19.过滤资源

每个浏览器中的“网络”面板显示页面加载期间请求的资源列表,以及状态代码,文件大小以及请求返回所花费的时间。随附的瀑布图可视化将每个资源加载到页面上所花费的时间。

虽然可以在每个浏览器中按类型(例如CSS,图像或XHR)过滤资源列表,但Chrome和Opera也允许在其搜索框中进行高级过滤,并使用以下前缀:

:过滤指定域中的资源

比大:对于文件大小

混合内容:用于过滤安全站点上通过HTTP加载的资源

状态码:过滤特定的状态代码(例如“未找到404”)。

Chrome和Opera的网络面板中还提供了许多额外的列,可以提供更多有用的信息。这些包括Cache-Control和Initiator。您可以通过右键单击任何标题来打开和关闭列。

20.异步调试

Sources / Debugger面板允许您添加断点并遍历代码,观察变量并检查调用堆栈。通过观察变量,您可以在执行程序时监视其值。

要添加监视,只需在右侧的面板中键入变量的名称。当您单步执行代码时,手表将保持其最新值。

使用Chrome和Opera,您还可以通过检查右侧角落的异步框来查看异步JavaScript回调和承诺的完整调用堆栈。当您遍历调用堆栈时,监视值也将更新为当时的状态。您可以通过命名回调而不是使它们成为匿名函数来更轻松地调试调用堆栈。

加起来

在开发和调试Web项目时,浏览器开发人员工具非常有用。真的值得花时间在您选择的浏览器中试验和探索DevTools,这样您就可以了解它是如何工作的。随着新功能一直出现以解决经典问题(例如布局编辑器)并帮助调试全新的Web功能(如Sources Service Worker面板),保持最新状态从未如此重要。



翻译字数超限