使用Chrome DevTools實時編輯HTML和CSS

們來看看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__。筆者并不打算寫過多的文字解釋原理,而是希望將原理總結成代碼片段更便于理解。

2、JavaScript繼承是如何實現的?

你只需要知道JavaScript 是通過名叫原型鏈的東西來實現繼承的,依托于constructor.prototype屬性(構造函數的prototype屬性)即可。你現在并不需要明白原型鏈是什么東西我會在下面一步一步詳解。

3、 javascript通過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);

4、prototype、proto解析區別

我們知道在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出來的。

5、通過設置上下文this的方式實現繼承

我們都知道函數中在可以使用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();

6、什么是原型鏈？

這個概念其實比較好理解,如果我們調用一個對象的一個方法,如何這個方法不存在那么就回去他的__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);

7、總結一些關于JavaScript 繼承、類型判斷、prototype的用法

判斷一個字面定義數組的原型的類型,輸出是[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));

輸出結果

在線咨詢

上一篇：皇家委任狀 (Royal Warrants of Appointment )
下一篇：PHP轉換HTML為PDF文檔的方法和常見問題