们来看看Chrome DevTools中的便捷实时编辑功能,以及它如何帮助您调试HTML和CSS,使您的前端更流畅。
Chrome DevTools是一款内置于Chrome浏览器中的强大的Web开发工具套件。DevTools对Web开发人员最有用的功能之一是能够在页面上实时编辑HTML和CSS。该功能允许任何开发人员,即使是HTML和CSS知识较弱的开发人员,都可以对网页的潜在变化进行快速原型和迭代。
在使用Lucidchart时,我最近的一个项目是在用户输入帐单信息时在输入中添加一些复选标记,以便在用户输入格式正确且有效的信息时即时提供反馈。尽管我在后端代码中比在CSS和HTML中工作更舒适,但我可以通过实时编辑功能轻松实现这些复选标记。
使用检查器工具编辑HTML有两种快速打开检查员的方法。首先是用F12打开DevTools ,选择“Elements”选项卡,然后单击左上角的光标图标。第二,更快,方法是使用键盘快捷键Ctrl + Shift + C。如果您经常在Linux环境中工作,那么在您意图复制文本时,很有可能很多次您都会在意外中使用此快捷方式!
一旦检查员处于活动状态,您可以通过单击它查找页面上任何元素的HTML。Chrome浏览器还会显示您将鼠标悬停在其上的元素的位置和大小信息。
一旦选择了一个元素,就可以通过各种方式与它进行交互。通过右键单击“元素”选项卡中的HTML并选择“编辑为HTML”,您可以实时编辑网页的标记,Chrome将在编辑完成后立即呈现该标记。
告诉DevTools您正在编辑可能会非常棘手。你的第一本能可能是击退Escape键,但这会使你退出编辑而放弃你的改变。您可以通过按Ctrl + Enter或直接单击您正在编辑的文本框外部来保存更改。
使用正常的Ctrl + Z和Ctrl + Y热键可以撤消或重做HTML编辑。除非您启用持续性编辑,否则它们也将在页面刷新时丢失。
为了开始我的复选标记项目,我开始创建一个原型元素作为测试我想要做的调整的地方。使用Chrome DevTools的实时编辑功能,我添加了一个仅包含字母“X”的占位符div,作为临时临时选中标记。
显然,这是一个非常糟糕的选择标记的借口,但它足以帮助我快速确定一些问题。首先,复选标记完全是错误的。另外,它弄乱了页面上其他元素的对齐。这两个问题都可以通过一些CSS来解决。幸运的是,Chrome还提供了一些优秀的工具,可以使用DevTools快速构建CSS更改原型。
从“元素”选项卡编辑CSS在“元素”选项卡的HTML视图右侧,有一个视图,显示了CSS规则适用于选定元素的细分。这个视图对于调试大量的CSS错误非常有用。例如,因为您可以看到哪些规则适用于当前元素,您可以确定某个元素是否获得了您所期望的CSS规则,或者缺少您认为应用于其中的CSS规则。CSS视图还显示何时由匹配规则应用的样式被更具体的规则覆盖。
CSS视图提供了一些非常有用的实时编辑功能。每种样式都在其旁边有一个复选框,让您启用或禁用某些样式,并查看它们如何影响页面上的元素。您还可以将新样式应用于特定元素,现有CSS规则或全新的CSS规则。所有这些更改都立即反映在页面上。
Chrome DevTools提供了一些便利的功能,可以使实时编辑CSS变得更容易。对那些不熟悉CSS的人最有帮助的是自动完成功能。在您输入风格名称时,Chrome会建议可能的匹配项。一旦输入样式的名称,Chrome也将帮助您使用该样式的正确值。对于枚举式样式,例如“位置”或“显示”,Chrome会显示合法值供您选择。对于数值输入,您可以使用向上和向下箭头将值增加1,而不必重新输入单位。
与实时编辑HTML一样,您可以使用Ctrl + Z和Ctrl + Y撤消或重做您的实时CSS更改。
使用DevTools,我能够很容易地找出CSS规则的组合,这些规则将我的伪复选框与我想要的对齐。这个过程涉及到一些试验和错误,但实时编辑使迭代周期非常短,这对于像我这样的CSS新手来说特别有用。
结论我们只是抓住了Chrome DevTools的实时编辑功能的能力,尤其是在CSS域。当我去调试一个CSS问题或快速原型化一个新的CSS变化时,这些基本技巧对我来说始终是非常宝贵的。
TML 5终于定稿,八年后我们再一次谈谈怎么改变世界
我们第一次谈论 HTML5 要改变世界大概是因为乔布斯,他坚持在 iOS 上不兼容 Flash,在 Adobe 统治多媒体开发的那个年代,这需要付出极大的勇气。这么多年过去了,虽然所有人都在谈论 HTML5,但是大部分人甚至都忘了它还是一个仍在完善中的体系。
2007 年 W3C(万维网联盟)立项 HTML5,直至 2014 年 10 月底,这个长达八年的规范终于正式定稿。
HTML5 的爆发,原生 App 生态系统的颠覆,是一场产业革命,很多角色都会受到影响,我们来预测一番。标准的 HTML5 引擎并不能解决 HTML5 的所有问题,拥有大流量入口的互联网巨头,莫不在思考内嵌更优秀的增强引擎。腾讯推出了 X5 浏览器引擎,就是看中这个机会。
终于,程序员们可以不用写四行+代码了.......
一周硬件总结:腾讯发布QQ物联,要把硬件世界连接在一起
上周,微软正式推出了智能腕带Microsoft Band,可以说是一次新品试探,真正的布局则是Microsoft Health;
“QQ 物联”平台,腾讯将向合作伙伴提供七大能力,包括互联网渠道分发能力、实现硬件快速联网能力、消息信息触达能力、服务扩展能力、大数据计算能力、安全服务稳定能力与一点接入的能力;
此外,小米将与南京银城地产合作首个智能家居体验间,该地产商已经采购了数千套小米智能家庭产品,欲在南京推出首套智能楼盘。
智能家居、新锐硬件、可穿戴设备、虚拟现实、3D打印、机器人....的相关资讯请戳原文
“我是一条野狗”:专访硬件云公司WildDog CEO刘之
“野狗”是一个硬件开发云服务平台,它能降低开发门槛,节省时间和支出,快速通过蓝牙、WiFi 和 3G 模组将传统设备连入网络。刚出发的“野狗”会专注于健康、移动定位和家居三个场景, 近期推出他们的产品第一发:满足那些内存低、可靠性一般的 ARM 处理器 M 系列 WiFi 模组的固件更新的需求。
“野狗”分为三个部分,分别是为嵌入式而生的云端“WildDog 云”、能简化嵌入式开发难度的系统“WildDog OS”和能为快速原型开发而生的硬件“WildDog HardWare”。
三个部分组合在一起就是一个完整解决方案,但也可以分开单独使用。在第三方硬件或是在 WildDog 自己的硬件上实现快速硬件原型开发。WildDog Cloud 除了能降低开发难度,提供云端外,还会实现数据的可视化、在线升级和信息推送等功能。未来也会提供机器学习工具,来帮助发现数据里面的秘密,比如检测异常点。
在各种累成狗、饿成狗之后来了个做硬件的“野狗”。啊喂,这个名字真的好么?
苹果零售高级副总:Apple Watch 最早在2015年3月中下旬上市
苹果负责零售及在线店业务的 SVP Angela Arhendts 最近向员工传递视频讲话,讲话内容涉及 Apple Watch 上市的时间框架——2015 年春,即明年 3 月中下旬至 6 月底。
苹果高层已在打磨 Apple Watch 的营销战略——上月,Tim Cook 表示,将培训 Apple Store 员工来引导客户试用 Apple Watch,比如:换不同尺寸的表盘或者五花八门的表带。
届时 Apple Watch 不会像 iPhone、iPad 那样锁在展示桌上——从这点看,Apple Store 的试用体验得到了更新。
还有四个月,咳咳该干嘛干嘛.......
让员工更快报账,YC毕业生Abacus Labs获350万美元种子投资
有抱怨的地方就有市场:Abacus Labs的掌上财务系统帮助企业员工当夜就能报账。
企业员工可以直接把收据拍张照片发到 Abacus 的手机应用里,或者直接把自己的信用卡号与 Abacus 连接,当员工支出费用时,公司管理人员就能实时在 Abacus 上看到并审核,还可以对这项支出的合理性做出评论,只要这笔支出通过审核,员工当夜就能收到钱。
目前 Abacus Labs 宣称免费,只对企业里的活跃用户(至少发生一次支出)每个月收费 5 美元,而且公司会计也可以免费使用这个平台。Abacus 表示,这套系统适合 5-100 人的中小企业使用,能够帮助他们更专注于自己的业务,而不用被各种文件埋没掉。
以后不用再整整齐齐地贴发票了......
除非注明,本站文章均为原创或编译,转载请注明: 文章来自 36氪
36氪官方iOS应用正式上线,支持『一键下载36氪报道的移动App』和『离线阅读』立即下载!
Javascript的继承模型、原型链等等概念比较晦涩难懂, 很多人过去在使用Javascript的时候并没有刻意去搞明白其中的原理,今天笔者一步一步分析一下JavaScript中的继承、原型链、prototype、__proto__。 笔者并不打算写过多的文字解释原理,而是希望将原理总结成代码片段更便于理解。
你只需要知道JavaScript 是通过名叫原型链的东西来实现继承的,依托于constructor.prototype属性(构造函数的prototype属性)即可。 你现在并不需要明白原型链是什么东西我会在下面一步一步详解。
function Animal() {
this.echo=function () {
console.log('I am An Animal....')
};
this.value=1;
}
function Monkey() {
}
//将构造函数Monkey的prototype属性设置为一个Animal的对象,Monkey就拥有了Animal的所有属性和方法
Monkey.prototype=new Animal();
new Monkey().echo();
console.log(new Monkey().value);
我们知道在JavaScript中我们可以通过new 创建一个对象,我们是根据一个函数模板创建一个对象。也就是说如下代码
Animal函数便是函数模板,类似C++/java等的类的概念,然而 new Animal出来的就是对象的概念。
function Animal() {
this.echo=function () {
console.log('I am An Animal....')
};
this.value=1;
}
代码1
__proto__属性是对象的一个属性,在ECMAScript规范中是不暴露的,但是有些浏览器可以访问到,对象的这个属性值就是函数模板的prototype值,
不知道这样说是不是不容易理解,换一个方式吧 :对象.__proro__===函数模板.prototype,前提这个对象时 这个函数new出来的。
我们都知道函数中在可以使用this引用当前上下文, 下面这段代码就是通过设置构造函数的上下文this的方式实现了继承,下面我给出两段代码分别仔细阅读下,琢磨一下代码所表达的意思。
代码1
function Animal() {
this.echo=function () {
console.log('I am An Animal....')
};
this.value=1;
}
//创建一个字面对象 三个方式都创建了对象
var obj1=new function () {};
var obj2={};
var obj3=[]
//分别将三个对象设置成Animal构造函数的上下文 并且调用Animal函数,那么这个时候Animal函数中的this=obj1,obj2,obj3
Animal.call(obj1);
Animal.call(obj2);
Animal.call(obj3);
obj1.echo();
obj2.echo();
obj3.echo();
代码2
function Animal() {
this.echo=function () {
console.log('I am An Animal....')
};
this.value=1;
}
function Monkey() {
Animal.call(this);
}
new Monkey().echo();
这个概念其实比较好理解,如果我们调用一个对象的一个方法,如何这个方法不存在那么就回去他的__proto__寻找,如果找到直接返回,如果没找到那么继续__proto__.__proto__中寻找,就像如下代码这样, B是如何找到value的。
代码1
var A={value:1};
var B={};
B.__proto__=A;
console.log(B.value);
function A() {
this.value=1;
}
function B() {
}
B.prototype=new A();
console.log(new B().__proto__.value);
代码3
function A() {
this.value=1;
}
function B() {
}
B.prototype=new A();
console.log(new B().value);
判断一个字面定义数组的原型的类型,输出是[object Array]
Object.prototype.toString.call([1].__proto__)
下面演示了数组和对象的关系, 原型链 []->Array->Object 下面返回true
Object.prototype===[].__proto__.__proto__
[].__proto__.__proto__.toString()
instanceof - JavaScript | MDN
Object.prototype.toString([])
通过call调用toString方法并且设置上下文获取真实类型
console.log(Object.prototype.toString.call([]));
console.log(Object.prototype.toString.call(/x/));
console.log(Object.prototype.toString.call(/x/));
console.log([].__proto__.__proto__.toString.call(/x/ig));
console.log([].__proto__.__proto__.toString.call(null));
输出结果
*请认真填写需求信息,我们会在24小时内与您取得联系。