Chrome浏览器调试页面详解 | 青训营笔记

chrome网页调试工具的使用步骤 chrome网页调试工具的使用 阅读详情

Chrome浏览器调试页面详解 | 青训营笔记


Chrome浏览器调试页面详解 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第11天。

在Chrome浏览器页面按下F12。

在这里插入图片描述
图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看:

  1. 箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在元素这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态;
    2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和PC端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,Chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择;
  2. 元素:功能标签页。用来查看,修改页面上的元素,包括DOM标签,以及CSS样式的查看,修改,还有相关盒模型的图形信息;
  3. 控制台:用于打印和输出相关的命令信息,比如console.log信息;
  4. 源代码:JS资源页面。这个页面内我们可以找到当然浏览器页面中的js源文件,方便我们查看和调试所有的代码都是压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式;
  5. 网络:网络请求标签页。可以看到所有的资源请求,包括网络请求,图片资源,HTML,CSS,JS文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看;
  6. 性能:显示JS执行时间、页面元素渲染时间;
  7. 内存:查看CPU执行时间与内存占用;
  8. 应用:列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除;
  9. 安全:显示这个网站的安全性,查看有效的证书。
C#实战:如何用winmm.dll打造毫秒级高精度定时器(附完整代码) 本文详细介绍了在C#中利用winmm.dll实现毫秒级高精度定时器的完整方案。针对.NET内置定时器精度不足的问题,通过调用timeSetEvent等原生API,提供了超越系统时钟中断周期的精准定时能力。文章包含核心原理剖析、完整的封装类代码以及音视频处理、游戏开发等场景下的实战应用与性能调优指南。 阅读详情

相关推荐

IC芯片验证 - 手把手教你搭建UVM验证环境

这是一个UVM的demo项目

howard789的博客 3万+

HTML入门:开发第1个网页以及简单调试

HTML 页面由一系列 HTML 标签组成,而 HTML 标签是构建页面结构和内容的基本元素。每个 HTML 标签由尖括号 < 和 > 包围。HTML 页面和 HTML 标签元素之间的关系呢,就像是人体和人体的各个器官和组织之间的关系一样,HTML 页面是整体,而 HTML 元素则是构成整体的各个部分。接下来我们就来看看这些重要部分的写法和含义。

u013179804的博客 1237

资源描述框架RDF及Turtle

文章目录1. RDF1.1 简介1.2 格式1.3 RDF的要求2. Turtle2.1 语法2.1.1 简单三元组2.1.2 Turtle中的命名空间2.1.3 Base URI2.1.4 谓语列表2.1.5 宾语列表2.1.6 空白节点(bNodes)2.1.7 数据类型2.1.8 Class membership2.1.9 空URI2.1.10 集合 1. RDF 1.1 简介 RDF(Resource Description Framework)语义网的标准数据模型,是一个用于描述 Web 上的资

doublewhite233的博客 2495

如何调试浏览器中的内存泄漏?

如何调试浏览器中的内存泄漏?

商务合作欢迎私信我 1万+

新能源充电桩充电枪口标准

建立的标准确保了新能源汽车充电的安全性、兼容性和效率,促进了新能源汽车产业的发展。

网络安全的研究者、新能源行业的追求者 4697

【硬件自锁开关】用两个D触发器完成实用的自锁开关电路

性价比是做电子设计的人要考虑的事,在学会了用单片机解决大多数问题的时候,是否你也想过用简单的手段解决一个多数场合要解决的问题呢?按一下,输出状态由关闭变成开启,再按一下开启变成关闭。机械弹簧式的开关可以实现自锁的功能:钩子和弹簧将当前状态“储存”起来,这个能量为下一次触发的提供状态“翻转”的动力;在电子设计中,经常通过单片机的程序指令实现自锁:通过寄存器将当前电平状态暂存起来,下一次触发的时候寄存器内容“取反”,再将其输出到端口。可否用电路实现以上过程呢?完全可以,方案很简单,通过两个D触发器即可实现。

qq_33175704的博客 4272

前端浏览器调试详解版

浏览器调试详解 1、调试工具介绍 1.1、打开调试工具的方法 1.2、打开命令菜单 命令菜单中可以输入命令修改调试工具的一些配置,如主题;或者调用调试工具自带的一些功能,如截屏、dock 1.2.1、切换主题 比如要修改浏览器调试工具的主题,ctrl+shift+p打开命令菜单,输入dark theme,就可与将调试工具的主题切换成黑色主题 重新F12打开调试工具或者点击Reload DevTools,可以看见主题变成了黑色 1.2.2、截屏 ctrl+shift+p打开命令菜单,输入screenshot,

博哥的二进制世界 2883

VMware ESXi 系统里创建虚拟机,虚拟磁盘日志损坏,如何或者把数据备份?

🏆本文收录于《全栈Bug调优(实战版)》专栏,主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!

**My Coding Family** 1642

如何使用浏览器的F12开发者工具调试页面?

一,背景介绍 通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的代码,用好F12能显着提高开发者的工作效率,加快调试的速度。 二,知识剖析 1,F12开发人员工具是一套按需采用的工具,网站开发人员可以随时在任何网页上使用F...

阿嚏乱码的地方 14万+

YOLOv8交通管理 详细解释及代码完整示例

YOLOv8在交通管理中的应用及代码实现 摘要:本文详细介绍了YOLOv8在交通管理领域的应用场景,包括车辆检测、违规行为识别和行人安全预警等。文章提供了完整的Python代码示例,展示了如何使用YOLOv8进行交通对象检测和车辆计数统计。代码包含模型加载、对象检测、结果可视化等功能模块,并给出了性能优化和功能扩展建议。该实现基于Ultralytics框架,支持多种YOLOv8模型选择,可根据实际需求调整模型大小和检测参数。

u010117029的博客 153

《YOLOv8-seg改进》专栏指导书册 &手把手创新教程

学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研;1)手把手教你如何训练YOLOv8-seg;2)模型创新,提升分割性能;3)独家自研模块助力分割;

会AI的学姐 3814

【青训营】前端开发调试知识

【青训营】前端开发调试知识 参加字节跳动的青训营时写的笔记。这部分是秃头披风侠老师讲的课。 1. 前端Debug特点 多平台:浏览器、NodeJs、小程序 多环境:本地开发环境、线上环境 多工具:Chrome devTools、Whistle 多技巧:Console、BreakPoint、sourceMap、代理 2. Chrome DevTools 2.1 动态修改元素和样式 点击.cls开始动态修改元素的class 输入类名即可给元素动态添加类名 勾选/取消类名查看类名生效效果 点

赤蓝紫の博客 523

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

前端开发调试工具笔记 | 青训营笔记

theme: channing-cyan highlight: arduino-light 这是我参与「第四届青训营 」笔记创作活动的第12天 前端开发调试笔记 特点: - 多平台:浏览器、Hybrid、NodeJs、小程序、桌面程序 - 多环境:本地开发环境、线上环境 - 多工具:chrome devTools、Charles、Spy-Debugger\Whistle\vCon...

y943711797的博客 75

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

如何运用浏览器进行各种调试?(网络、内存、控制台等调试用法)

你可以优化该函数,减少计算量,提升性能。:在开发过程中,你可能会遇到某个功能没有按照预期工作,比如点击按钮后没有反应,或者某个值未正确传递。:你正在开发一个网站,但发现浏览器显示“不安全”的警告,可能是证书问题或加载了 HTTP 内容。:你会看到一个 404 错误(请求的 API 地址不存在),你可以检查 API 请求的 URL 并修正。:你开发了一个电商网站,页面加载较慢,或者用户在提交订单时,订单数据没有成功发送到服务器。:你开发了一个带有用户认证功能的应用,当用户登录后,页面没有记住用户的登录状态。

卷王 1656

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

html页面调试

可能有些朋友不太清楚怎么去调试自己的程序,希望可以帮到他们一点点

伊始的博客 1万+

浏览器调试工具

标签、样式点击左侧的标签,右侧会显示标签对应的样式。

dorkycode的博客 1578

内存优化笔记

前端开发者往往不太关注页面所占用的内存,因为前端内存的分配与回收基本是依靠系统自动完成的,这个过程对于开发者是无感的。但内存优化的作用也同样重要,一个好的网站,内存的优化也是极致的,比如淘宝的首页,只有 10M 大小。特别是随着前端项目的逐渐复杂,内存的占用也逐渐攀升,曾经遇到过页面的内存超 300M,同时打开几个窗口,就造成了页面崩溃。

浮游的博客 1415

前端技术-调试工具

常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试工具。 打开 Google Chrome 浏览器,通过下面任何一种方式进入开发人员工具:  -点击位于浏览器用户界面右上角的“页面”下拉菜单,“更多工具”→“开发人员工具”。  -

GarfieldEr007的专栏 5129

浏览器调试步骤

在进行浏览器调试时,我们需要按照以下步骤进行操作。这些步骤包括确认调试环境、使用开发者工具进行调试、检查网络请求和响应、查看控制台输出、调试JavaScript代码、检查页面布局和样式等。通过这些步骤,我们可以快速定位和解决前端页面的问题,提升页面的质量和性能。

Wannaer的博客 1624

WEB浏览器F12调试页面

WEB浏览器F12调试页面 Elements—标签页,可以查看并且编辑页面元素,在左侧可以点选某一个元素,该元素会在页面上高亮,同时在右侧显示该元素的所有样式; Console—Console面板,就是Javascript控制台,Console最有用的,就是打断点的时候进行查看; 3.Sources—Sources标签页,可以查看到请求的资源情况;可以查看当前网站的HTML,及其引入的所有CSS、Javascript文件。重要的是,在Javascript文件中的任何一行,我们都可以设置断点,脚本将会在这一

qq_51959441的博客 1万+

如何使用浏览器的F12调试页面

如何使用浏览器的F12调试页面? 一个程序员按照要求编写一个网页,不可能一次编写就完全达到目的,一般要对自己的的代码修改调试几次后才能到达要求,浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。 F12 开发人员工具是一套按需采用的工具,网站开发人员可以随时在任何网页上使用 F12 工具,从而快速调试 JavaScript、HTML 和级联样式表 (CSS),...

疯一样的女子 1万+

使用浏览器工具调试学习网页

1、打开网页 https://www.w3school.com.cn/tiy/t.asp?f=eg_html_imglink,作为学习调试例子。 2、按F12键,进入浏览器的调试状态。或者按照下图打开浏览器的开发者工具。 3、按照下图选中要调试的HTML元素 ①点击选中“1”处的选取元素 ②点击“2”处的“运行代码”。出现调试状态下的“代码区”、“CSS区”和“盒模型”区。 ③可以看到HTML元素“运行代码”对应的代码是 <a onclick="submitT...

qq_43276318的博客 781

怎么在pc端浏览器调试移动端页面

在最近的工作中兼任一点测试工作,需要调试移动端页面,在看了好多方法大概主要就是以google chrome浏览器为主,大概步骤为: 1.打开chrome浏览器 2.输入网址 3.按f12呼出开发者工具 4.选择emulation 大工告成,比较遗憾的是,我找了很久也没有找到这个emulation选项,开始以为是自己的浏览器不是最新版的问题,更新之后还是没有找到,搜索之后才发现老版本的才有这个选项

allofhuan的博客 1万+

总结一下,如何调试页面bug和性能调优

调试页面bug和进行性能调优是前端开发中的两个重要环节。

liuhao9999的博客 775

如何在谷歌浏览器调试界面中搜索指定文件

简单粗暴ctrl+o 1.打开调试界面 2.点击Ctrl+O,会出来一个搜索框,输入相关文件名就可以找到想找的文件

诚实可靠小郎君的博客 1万+

谷歌浏览器--调试--介绍/使用/用法

开关某个功能 shadow DOM F12=> 右上角齿轮=> Preferences=> Elements=> Show user agent shadow DOM

IT利刃出鞘的博客 1092
上一篇: HTTP/HTTPS | 青训营笔记
下一篇: Webpack入门 | 青训营笔记
UestcXiye
博客等级 码龄8年 9032粉丝 1306原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

UestcXiye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值