1、 右键选择“审查元素”（快捷键Ctrl + Shift + I），此时进入初始界面，一般用到的是element和source这两项，element用来显示页面的所有HTML元素及他们的层级关系，source用来显示页面生成的所调用的js代码。如下图所示： 2、如果想要查看界面上某个元素在什么位置（哪个div或li等）
最近有客户要求给他们网站做地图方面的功能，由于某些原因，网站必须使用google map，而且希望用到geocoding。大家知道google map api调用国内已经访问不了，虽然网上有很多教程，什么替换ip啊，把maps.google.com改成maps.google.cn。但其实这些方法都是掉了牙的，早就已经不管用了。 今天我把我的google map api安装、配置、使用方法
测试主要是发现错误，调试（也称纠错）则是确定错误的原因和准确位置，并加以纠正。 调试是包含2个步骤，从执行了一个成功的测试用例、发现了一个问题之后开始。第1步，确定程序中可疑错误的准确性质和位置；第2步，修改错误。错误定位是一项技术活，是有一定难度的。目前有4种常见方法。 1. 蛮干（brute force）（也叫暴力法）调试程序的最为普遍的模式是所谓的“暴力”方法。这种方法之所
本文章，基于mac，快捷键跟window有点区别作为前端开发者都知道，快捷键 option＋command+I 可以打开chrome调试工具，这里就大概介绍下chrome调试工具的常用方法，对调试工具的掌握，能大大提高我们调试代码的效率。每个面板都有详细的顺序标记和解释，一定要仔细阅读和练习。 调试中常用快捷键command+o 在Sources面板中打开一个文件(JS,CSS
转载
2024-06-07 15:20:04
130阅读
为啥用sourceMap这几天在搞前端错误日志，做过线上发布的都知道，我们发布到生产环境的代码，一般都有如下步骤：压缩混淆，减小体积多个文件合并，减少HTTP请求数通过编译或者转译，将其他语言编译成JavaScript
这三个步骤，都使得实际运行的代码不同于开发代码，不管是 debug 还是捕获线上的报错，都会变得困难重重。解决这个问题的方法，就是使用sourceMap。啥是sourceMap简单
转载
2024-04-03 11:48:52
54阅读
https://developers.google.com/web/tools/chrome-devtools/javascript/step-code step over next function call Executes whatever happens on the next line a
转载
2019-06-30 16:48:00
321阅读
2评论
Chrome DevTools Protocol2017-08-24 / uncle.wangChrome 的 F12 想必大家已经再熟悉不过了，如果你是一名前端er，那玩意简直就像咱们的饭碗一样。。这是 Chrome 自带的调试工具，平常 debug 页面全靠它，然而它却是通过一个叫 Chrome DevTools Protocol 的协议来和
转载
2024-04-18 10:57:50
258阅读
1、什么是环境变量呢？可以在父shell和子shell中都能调用的就是环境变量，只能在本shell中使用的变量就是普通的变量。2、什么是环境变量配置文件呢?linux 中所有需要永久生效的内容，都必须写入配置文件中；同样，对于环境变量，想要在系统重启或者其他情况下，让该环境变量永久生效的方法，就是将环境变量信息写到环境变量配置文件中3、source命令功能：如果修改了环境变量的配置配置文件，必须退
什么是concurrenthashmapconcurrenthashmap（简称chm） 是java1.5新引入的java.util.concurrent包的成员，作为hashtable的替代。为什么呢，hashtable采用了同步整个方法的结构。虽然实现了线程安全但是性能也就大大降低了 而hashmap呢，在并发情况下会很容易出错。所以也促进了安全并且能在多线程中使用的concurrenthas
转载
2024-04-29 14:09:30
29阅读
谷歌浏览器首页被篡改如何恢复设置方法 谷歌浏览器的功能十分强大，因此深受很多windows10系统用户的喜爱。不过，近来有部分Win10系统用户却遇到了谷歌浏览器首页被2345或是搜狗篡改的问题，而且主页无法修改为自己常用的网址，这是怎么回事呢？浏览器家园整理了以下几种解决方法，希望对你有所帮助。步骤1：直接修改启动页设置1、首先，检查Chrome设置。点击chrome浏览器右上角菜单。
转载
2024-08-22 13:54:02
85阅读
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能，下面介绍的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码而一无所获之后打开Sources进行js断点调试,几乎能解决8成的代码问题。js断点功能让人兴奋不已,以前只能在IE中
转载
2023-07-14 12:18:23
185阅读
前端如果不需要兼容IE浏览器，那么基本就一直使用Chrome浏览器了，它是基于WebKit内核的，安全高效。Chrome调试面板浏览器位于右上角，如下图所示或者使用 Ctrl+Shift+I 快捷键 都可以打开。 1、认识面板1是元素，是构建这个网页的DOM树以及CSS样式渲染。在这里可以查看每个元素的占比和样式，可以修改显示。一般情况下关于样式的问题，我都会打开，在这里审查元素，一个一
转载
2023-07-14 17:54:54
871阅读
chrome 手机调试写在前面相信很多人都试过，在电脑调试一点问题都没有，可是到了手机端各种问题，兼容、数据捕获 等问题 很多时候我们都是通过 vconsole 进行调试。（至于怎么用就自行百度，这里不展开）。可是 vconsole 用着也不方便，每次只能打印一个变量，那能不能在手机端，也使用 chrome 的调试控制台来进行断点和 css 调试？！需要准备的材料1、PC 端的 chrome 浏览
转载
2024-08-12 18:49:24
174阅读
谷歌浏览器怎么调试js一、总结一句话总结：chrome里面功能比较强大，功能也很多，多点点就好，遇到问题的时候多尝试就好，多 尝试 1、对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处？html break on 2、查看到存储相关的如Cookies、HTML5的Database和LocalStore？appli
转载
2023-11-13 13:36:10
602阅读
背景：随着移动端的不断推进，移动端的调试也成为前段开发者不得不面临的问题，在PC端的时代，我们直接打开chrome的检查元素面板，就可以解决大部分的问题了。戴氏 到了移动端，明明在电脑上模拟好的元素，明明在电脑上模拟好的元素，在手机上就会乱掉。下面我们就来聊一聊移动端调试的那些问题。让着你调试不再那么 困难。1、浏览器模拟手机调试1/1 如何使用？ chrome作为一款浏览器，给开发者带来的便捷也
转载
2024-05-28 14:04:32
2306阅读
此次，我所要与大家分享的是利用Chrome工具进行前端js调试，也就是我们在程序中所说的debug（这个方法是我一个朋友和我分享的，我拿来跟大家一起分享）。必备工具：Chrome浏览器， js开发环境。在Chrome浏览器中运行你的web工程，打开“开发者模式”（右键选择检查或者按“F12“”）。打开你的sources选项，找到你所要调试的js文件。在你想要调试的地方单击插入断点，成功之后大家也会
转载
2023-07-06 23:05:00
163阅读
在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。在Chrome出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是Javascript执行速度（现在的FireFox4也比之前的FireFox3有很大的进步）。不过当时由于Chrome的开发者工具还不是很完善，
转载
2024-07-26 13:17:19
72阅读
这次用一个简单的js循环代码，讲解一下浏览器的断点调试，这个技能对找bug很管用，以谷歌浏览器为例，其他浏览器也是一样的，只是可能源代码调试的位置不太一样，例子代码如下：<script>
//目标查看i和sum的变化情况
var i =1;
var sum =0;
while(i<10){
su
转载
2024-01-03 13:52:24
115阅读
Chrome浏览器及基于Chromium内核的Edge应该是目前最流行的桌面浏览器了。前端小伙伴进来一看标题，此文莫非是超纯净水？不就是一句的事儿吗？4个字：按F12，结束。确实，大部分情况下这样就轻松打开了调试工具，但你有没有想过F12快捷键被其他系统快捷键占用了、甚至于说有些异型键盘没有F12等等情况怎么办？还有正好F12键坏了呢？事实上Edge作为微软产品，它的F12能被组策略禁用的，有的公
转载
2023-08-18 18:01:20
615阅读
打开测试网址： f12 打开开发者工具： 控制台介绍： Elements：页面元素，可以进行编辑，保存后实时查看页面效果 Network： 查看js模拟的http请求，例如下图中修改购物车中商品数量，可以实时的看到请求地址，直接上图。点击请求地址，会把请求的头信息和响应信息等数据展示出来，此处非常便捷，展示样式比firebug更直观，直接上图，可以点击查看头信息，preview，响应信息
转载
2023-08-17 19:38:33
69阅读
