Chrome Devtools 開發者工具功能介紹-console - 歐斯瑞

文章推薦指數: 80 %
投票人數:10人

網頁開發者常需與瀏覽器打交道,本文將針對Chrome瀏覽器,教學使用console指令的幾個基本功能! RecentPosts 前端開發|如何使用jQueryresizeevent套件 前端開發|如何將8位數的HEX色碼轉換成RGBA Magento2/前端開發|如何使用Slickjs自訂商品輪播器 Magento2/前端開發|如何調整pagebuilder商品網格及商品輪播的響應式變化 Magento2/前端開發|如何避免點擊目錄頁的篩選器時產生的畫面跳動情形 文章分類 電商新手包 選擇銷售平台 Magento入門 電商快訊 歐斯瑞新訊 產業新知 Magento OpenSource AdobeCommerce Shopify 技術應用 軟體PM小記 前端開發 後端開發 網站測試 設計分享 行銷與社群 電商串接 金流 物流 客服 行銷 內部管理 文章彙整文章彙整 SelectMonth October2022 (12) September2022 (5) August2022 (9) July2022 (3) June2022 (2) May2022 (7) April2022 (5) March2022 (12) February2022 (4) January2022 (1) December2021 (6) November2021 (1) October2021 (7) September2021 (7) August2021 (11) July2021 (7) June2021 (14) May2021 (11) April2021 (6) March2021 (6) February2021 (12) January2021 (8) December2020 (13) November2020 (7) October2020 (15) September2020 (7) August2020 (14) July2020 (2) June2020 (17) May2020 (14) April2020 (17) March2020 (21) February2020 (4) January2020 (2) December2019 (4) November2019 (3) October2019 (7) September2019 (11) August2019 (13) July2019 (2) June2019 (10) May2019 (14) April2019 (11) March2019 (8) February2019 (9) January2019 (14) December2018 (16) November2018 (20) October2018 (22) September2018 (30) August2018 (22) July2018 (36) June2018 (24) May2018 (21) April2018 (12) March2018 (32) February2018 (15) January2018 (15) December2017 (39) November2017 (15) October2017 (13) September2017 (13) August2017 (14) July2017 (4) June2017 (16) May2017 (15) April2017 (9) March2017 (7) February2017 (6) January2017 (12) December2016 (14) November2016 (6) October2016 (12) September2016 (11) August2016 (18) July2016 (12) June2016 (16) May2016 (9) April2016 (10) March2016 (15) February2016 (14) January2016 (18) December2015 (21) November2015 (32) October2015 (24) September2015 (28) August2015 (25) July2015 (26) June2015 (23) May2015 (15) April2015 (18) March2015 (16) February2015 (21) January2015 (17) December2014 (22) November2014 (20) October2014 (15) September2014 (13) August2014 (11) July2014 (12) June2014 (9) May2014 (10) April2014 (11) March2014 (6) January2014 (1) November2013 (5) October2013 (2) 關於歐斯瑞 Back 工作機會 Magento Back Magento解決方案 Back Magento服務 MagentoOpenSource MagentoCommerce MagentoCommerceCloud MagentoOMS MagentoXMiraklB2B2C商城 MagentoB2B MagentoB2E Magento內部系統串接 Back ERP管理系統整合  PIM商品管理系統整合 POS系統整合 CRM客戶管理系統整合 Magento外部系統串接 Back 各國金流系統 第三方客服系統 Magento健檢中心 Back Magento1升級Magento2 Magento維運服務 MagentoforHeadless&PWA Back MagentoforHeadless&PWA Shopify Back ShopifyPlus 企業電商顧問 Back 電商轉換率分析CRO 網站速度優化 AWS主機伺服器建置維運服務 成功經驗 Back 客戶成功案例 客戶回饋 新知分享 Back Magento Shopify 聯絡我們 ChromeDevtools開發者工具功能介紹-consoleByAstralWeb5yearsagoNoComments首頁 / 技術應用 / ChromeDevtools開發者工具功能介紹-console 網頁開發者大多需要長期與瀏覽器奮鬥,這次針對Chrome大部分人最常使用的瀏覽器來彙整幾個常用的基本功能! 基本console使用 開發Client端的JavaScript最常利用到的就是Console,首先請打開Chrome並隨便開啟一個網站,輸入快捷鍵Cmd+Option+J(Windows是Ctrl+Shift+J),右手邊即會顯示控制台的console版面。

  輸入console指令: 1.使用不同的輸出方式除了幫助視覺化的呈現,也可以方便我們對輸出信息進行分類,或者讓輸出更具語義化 console.log(‘’):最常見的輸出方式 console.info(‘’):提示型輸出 console.error(‘’):錯誤輸出呈現紅色 console.warn(‘’):警示輸出呈現黃色 console.assert([ConditionExpression], ‘’):對輸出進行判斷錯誤則呈現紅色 console.clear():清空console console.table():當要輸出數組結構時使用,以表格的方式呈現 2.console特殊功能 console.count():用於統計次數 console.time():計時開始  &  console.timeEnd():結束計時 這兩個方法配合使用可以計算出它們之間javascript的執行消耗時間(單位毫秒) console.dir():顯示對象的所有屬性和方法(輸出結果類似於DOM面板中的樣式)   console.group()  &console.groupEnd():一般的console.log並沒有層級關係,在需要顯示層級時使用 以上是幾個較常使用的console功能,實際上當然不只這些方便開發者使用,更多完整的資訊請點選以下連結 https://developers.google.com/web/tools/chrome-devtools/console/console-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3           RecentPosts 前端開發|如何使用jQueryresizeevent套件 前端開發|如何將8位數的HEX色碼轉換成RGBA Magento2/前端開發|如何使用Slickjs自訂商品輪播器 Magento2/前端開發|如何調整pagebuilder商品網格及商品輪播的響應式變化 Magento2/前端開發|如何避免點擊目錄頁的篩選器時產生的畫面跳動情形 文章分類 電商新手包 選擇銷售平台 Magento入門 電商快訊 歐斯瑞新訊 產業新知 Magento OpenSource AdobeCommerce Shopify 技術應用 軟體PM小記 前端開發 後端開發 網站測試 設計分享 行銷與社群 電商串接 金流 物流 客服 行銷 內部管理 文章彙整文章彙整 SelectMonth October2022 (12) September2022 (5) August2022 (9) July2022 (3) June2022 (2) May2022 (7) April2022 (5) March2022 (12) February2022 (4) January2022 (1) December2021 (6) November2021 (1) October2021 (7) September2021 (7) August2021 (11) July2021 (7) June2021 (14) May2021 (11) April2021 (6) March2021 (6) February2021 (12) January2021 (8) December2020 (13) November2020 (7) October2020 (15) September2020 (7) August2020 (14) July2020 (2) June2020 (17) May2020 (14) April2020 (17) March2020 (21) February2020 (4) January2020 (2) December2019 (4) November2019 (3) October2019 (7) September2019 (11) August2019 (13) July2019 (2) June2019 (10) May2019 (14) April2019 (11) March2019 (8) February2019 (9) January2019 (14) December2018 (16) November2018 (20) October2018 (22) September2018 (30) August2018 (22) July2018 (36) June2018 (24) May2018 (21) April2018 (12) March2018 (32) February2018 (15) January2018 (15) December2017 (39) November2017 (15) October2017 (13) September2017 (13) August2017 (14) July2017 (4) June2017 (16) May2017 (15) April2017 (9) March2017 (7) February2017 (6) January2017 (12) December2016 (14) November2016 (6) October2016 (12) September2016 (11) August2016 (18) July2016 (12) June2016 (16) May2016 (9) April2016 (10) March2016 (15) February2016 (14) January2016 (18) December2015 (21) November2015 (32) October2015 (24) September2015 (28) August2015 (25) July2015 (26) June2015 (23) May2015 (15) April2015 (18) March2015 (16) February2015 (21) January2015 (17) December2014 (22) November2014 (20) October2014 (15) September2014 (13) August2014 (11) July2014 (12) June2014 (9) May2014 (10) April2014 (11) March2014 (6) January2014 (1) November2013 (5) October2013 (2)  00000 歐斯瑞-一個對網路世界充滿熱情的團隊 歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置與 Magento和 Shopify相關的電商專案。

立即聯繫我們 上一篇文章網站目錄vs網站篩選器,兩者之間的差異與應用下一篇文章使用GSAP來搞定動畫與特效推薦文章前端開發|如何使用jQueryresizeevent套件2022-10-11 0前端開發|如何將8位數的HEX色碼轉換成RGBA2022-10-11 0如何新增Magento會員中心導覽列內的客製連結2022-08-29 0如何移除Magento會員中心導覽列內不必要的連結2022-08-25 0Category:  技術應用Tags:  前端開發,網站測試,google工具,後端開發,網站技術與設計,行銷與實用好文 留下回應取消回覆 你的電子郵件地址不會被公開.姓名* 電子郵件* 網站 維運服務



請為這篇文章評分?