电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

老司機常用的幾個JavaScript調(diào)試技巧

瀏覽:26日期:2023-11-11 13:36:58

1. debugger

除了console.log, debugger是我們最喜歡、快速且骯臟的調(diào)試工具。執(zhí)行代碼后,Chrome會在執(zhí)行時自動停止。你甚至可以把它封裝成條件,只在需要時才運行。

if (thisThing) { debugger;}

2. 用表格顯示對象

有時, 有一組復雜的對象要查看。可以通過console.log查看并滾動瀏覽,亦或者使用console.table展開,更容易看到正在處理的內(nèi)容!

var animals = [ { animal: ’Horse’, name: ’Henry’, age: 43 }, { animal: ’Dog’, name: ’Fred’, age: 13 }, { animal: ’Cat’, name: ’Frodo’, age: 18 }];console.table(animals);

老司機常用的幾個JavaScript調(diào)試技巧

3. 使用不同屏幕尺寸

在桌面上安裝不同移動設備模擬器非常棒,但現(xiàn)實確是不可行的。如何調(diào)整窗口大小呢?Chrome提供了所需的一切。跳到控制臺并點擊‘切換設備模式’按鈕。觀察窗口變化即可!

老司機常用的幾個JavaScript調(diào)試技巧

4. 使用 console.time() 和 console.timeEnd() 測試循環(huán)

要得知某些代碼的執(zhí)行時間,特別是調(diào)試緩慢循環(huán)時,非常有用。 甚至可以通過給方法傳入不同參數(shù),來設置多個定時器。來看看它是怎么運行的:

console.time(’Timer1’);var items = [];for(var i = 0; i < 100000; i++){ items.push({index: i});}console.timeEnd(’Timer1’);

運行產(chǎn)生了一下結(jié)果:

老司機常用的幾個JavaScript調(diào)試技巧

5. 將代碼格式化后再調(diào)試JavaScript

有時代碼會在生產(chǎn)環(huán)境出問題,但是你的source maps沒有部署在生產(chǎn)環(huán)境上。不要怕。Chrome可以將您的JavaScript文件格式化。格式化后的代碼雖然不像真實代碼那樣有用,但至少可以看到發(fā)生了什么。點擊 Chrome控制臺中的源代碼查看器中的{}按鈕即可。

老司機常用的幾個JavaScript調(diào)試技巧

6. 觀察特定函數(shù)的調(diào)用及參數(shù)

在Chrome控制臺中,可以觀察特定的函數(shù)。每次調(diào)用該函數(shù),就會打印出傳入的參數(shù)。

var func1 = function(x, y, z) {//....};

輸出:

老司機常用的幾個JavaScript調(diào)試技巧

這是查看傳入函數(shù)參數(shù)的好方法。但是,如果控制臺提示我們形參的數(shù)目就更好了。在上面的例子中,func1期望3個參數(shù),但是只有傳入了2個參數(shù)。如果在代碼中沒有處理這個參數(shù),就很可能出錯。

7. 在控制臺中快速訪問元素

控制臺中比 querySelector 更快的方法是使用美元符號, $(’css-selector’) 將返回CSS選擇器的第一個匹配項。 $$(’css-selector’) 將返回所有匹配項。如果多次使用一個元素,可以把它保存為一個變量。

老司機常用的幾個JavaScript調(diào)試技巧

8. Postman 很棒(但Firefox更快)

許多開發(fā)人員使用Postman查看ajax請求。Postman真的很優(yōu)秀。但打開一個新的窗口,寫入請求對象,然后再來測試它們,顯得很麻煩。

有時使用瀏覽器更容易。

當你使用瀏覽器查看時,如果請求一個密碼驗證頁面,不需要擔心身份驗證的cookie。下面看,在Firefox中如何編輯并重新發(fā)送請求。

打開控制臺并切換到network選項卡。右擊所需的請求,然后選擇編輯并重新發(fā)送?,F(xiàn)在可以改變?nèi)魏蜗胍母牡摹8臉祟}并編輯參數(shù),然后點擊重新發(fā)送。

下面我用不同的屬性發(fā)起的兩次請求:

老司機常用的幾個JavaScript調(diào)試技巧

9. 中斷節(jié)點更改

DOM是一個有趣的東西。有時候它會改變,你并不知道為什么。 但是,當您調(diào)試JavaScript時,Chrome可以在DOM元素發(fā)生更改時暫停。你甚至可以監(jiān)視它的屬性。在Chrome控制臺中,右擊該元素,然后在設置中選擇中斷:

老司機常用的幾個JavaScript調(diào)試技巧

本文大部分內(nèi)容節(jié)選自:https://raygun.com/javascript-debugging-tips。

來自:https://www.helloweba.com/view-blog-493.html

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 管家婆-管家婆软件-管家婆辉煌-管家婆进销存-管家婆工贸ERP | 焊接烟尘净化器__焊烟除尘设备_打磨工作台_喷漆废气治理设备 -催化燃烧设备 _天津路博蓝天环保科技有限公司 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 沉降天平_沉降粒度仪_液体比重仪-上海方瑞仪器有限公司 | 陕西安玻璃自动感应门-自动重叠门-磁悬浮平开门厂家【捷申达门业】 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 玉米加工设备,玉米深加工机械,玉米糁加工设备.玉米脱皮制糁机 华豫万通粮机 | 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 农业四情_农业气象站_田间小型气象站_智慧农业气象站-山东风途物联网 | 气体检测仪-氢气检测仪-可燃气体传感器-恶臭电子鼻-深国安电子 | 骨龄仪_骨龄检测仪_儿童骨龄测试仪_品牌生产厂家【品源医疗】 | 涡轮流量计_LWGY智能气体液体电池供电计量表-金湖凯铭仪表有限公司 | 海尔生物医疗四川代理商,海尔低温冰箱四川销售-成都壹科医疗器械有限公司 | 志高装潢官网-苏州老房旧房装修改造-二手房装修翻新 | 船老大板材_浙江船老大全屋定制_船老大官网 | 润滑脂-高温润滑脂-轴承润滑脂-食品级润滑油-索科润滑油脂厂家 | 吊篮式|移动式冷热冲击试验箱-二槽冷热冲击试验箱-广东科宝 | 篷房[仓储-婚庆-展览-活动]生产厂家-江苏正德装配式帐篷有限公司 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 亳州网络公司 - 亳州网站制作 - 亳州网站建设 - 亳州易天科技 | 自恢复保险丝_贴片保险丝_力特保险丝_Littelfuse_可恢复保险丝供应商-秦晋电子 | 电气控制系统集成商-PLC控制柜变频控制柜-非标自动化定制-电气控制柜成套-NIDEC CT变频器-威肯自动化控制 | 锡膏喷印机-全自动涂覆机厂家-全自动点胶机-视觉点胶机-深圳市博明智控科技有限公司 | 广域铭岛Geega(际嘉)工业互联网平台-以数字科技引领行业跃迁 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 汝成内控-行政事业单位内部控制管理服务商 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 真空吸污车_高压清洗车厂家-程力专用汽车股份有限公司官网 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 电机保护器-电动机综合保护器-上海硕吉电器有限公司 | 酒水灌装机-白酒灌装机-酒精果酒酱油醋灌装设备_青州惠联灌装机械 | 莱州网络公司|莱州网站建设|莱州网站优化|莱州阿里巴巴-莱州唯佳网络科技有限公司 | 奥运星-汽车性能网评-提供个性化汽车资讯 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 移动机器人产业联盟官网 | SDI车窗夹力测试仪-KEMKRAFT方向盘测试仪-上海爱泽工业设备有限公司 |