一.做产品经理，而不是功能经理 这句话我最早是听天猫总裁逍遥子说的，当时没有感觉，现在发现非常有道理，因为周围太多的产品经理实际上是在做一名功能经理。...有一次开会，淘宝的总裁语嫣姐姐说了一句很朴素但很有道理的一句话：产品能用和好用完全不是一回事！ 二.实现产品需求，而不是用户需求 这个话题很有意思。...三.要锦上添花，而不是画蛇添足 互联网的发展，让很多互联网产品经理有个惯性：做产品迭代要快。快速上线，快速修改。这里也有误区，对于一些基本功能，确实要快速上线，快速迭代。...画蛇添足的功能越多，让产品背负的垃圾就越多，造成好的功能没有资源做，差的功能又无法下线。 四.追求人性化，而不是追求完美 很多产品经理，追求完美。...希望2013年能让更多的人把淘宝搜索当成一个朋友，而不是一个工具。 写了这么多，回头看看我这篇文章，好像没有什么产品设计方法，只是一些思考，仅此而已。
隐藏标注 Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift
Chrome调试工具常用功能整理 windows: ctrl + shift + i mac: cmd + opt + i Elements Dom 选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件...元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点. xhr 断点 打开 chrome...打开 Chrome 上的开发者工具，选择 Network 把禁止缓存勾上(Disable cache)。
很多的博客站长们感觉都非常注重自己博客网站的功能上的扩展和折腾，往往忽略了真正重要的内容建设，今天给网站加个炫酷的功能，明天加个那样的功能，折腾来折腾去没有输出多少有价值的内容出来，整个网站给人感觉没有多少深度...其实博客网站越简约，功能越单一有时候会呈现出很意外的效果，功能少了，依赖的第三方的 HTTP 请求自然就少了，网站的载入时间也就越来越少。...网站越简约内容的表现方式就越突出，用户需要无非就是速度和内容呈现突出清晰嘛，站长有时候其实就是一个产品经理，网站就是你唯一的产品，如何让产品获得用户的青睐就是站长们要去琢磨的，苹果 iPhone 的成功不是各种功能碓彻出来的...长期这样折腾外观和功能下去，当博客站长“折腾”的激情越来越小的时候也就意味着这个博客基本是寿终正寝了，不是荒废就是彻底的陨落消失。...折腾是为了更好的产生内容，而不是为了折腾而折腾，不能产生内容的折腾真的是“白折腾”。
那么我们的前端工程是不是也可以使用自动化测试来帮助我们提升项目质量呢 ？ ?...在编写真正实现功能的代码之前会先要求测试人员提供测试用例。这种开发模式主要思想是：在正式编写需求功能的代码之前，先编写单元测试代码，再编写需求功能代码满足这些单元测试代码。...运行匹配到的自动化用例 $ cucumber-js features/**/*.feature 运行某个目录下的自动化用例 $ cucumber-js features/...dir 运行某个自动化用例 $ cucumber-js features/trip.feature 运行自动化用例的指定行 $ cucumber-js features/...因此这二者可以更好的结合，并且更加方便在浏览器中调试。 更简单的拦截网络请求（可以更加方便的 Mock 接口等） 5.2 我可不可以使用 Selenium ？ 当然可以！
3、行为与断言需要闭环，测试场景需要幂等 如同开发完成的功能都需要有Issue记录一样，QA的测试行为也需要尽可能全量的拓印下来。...然而并不是所有的行为都能够称之为行为，其中需要意识到行为和实现是有区别的，我们希望记录的是具体的用户行为而不是这个行为中的每一步实践。...然而会存在以下几个问题： （1）不是好的Gherkin写法如下图所示，这是官网对于Gherkin写法的一个范例，这也是前面所提到的Gherkin应该记录行为而不是行为对应的实践。...举一个例子，在登录场景中，Gherkin Steps应该这样写:When "Bob" logs in而不是： Given I visit "/login" When I enter "Bob" in...同时UI测试由于大量的智能缺失，很难匹配上人眼测试的粒度和效果，所以可以看到大量的UI测试都是固定化流程的不断重复，很多报错也是来自脚本本身而不是产品本身。整体来说无论怎么做UI测试性价比很低。
只不过 ESLint 发现的是一些逻辑错误或者格式错误，而 TSC 发现的是类型错误。 都是基于 AST，那 Babel 能不能实现 ESLint 和 TSC 的功能呢？...然后我注意到 ESLint 插件提供了 fix 功能，可以自动 fix 一些错误，比较好奇它是怎么实现的，难道也是像 Babel 这样递归打印 AST 么？ 研究了下发现并不是。...再来举个例子，就是我最近在研究的调试： 调试我们一般用 Chrome DevTools，它可以调试网页，也可以调试 Node.js，这是为什么呢？...后来发现小程序调试工具、跨端引擎调试工具很多也都是用 Chrome DevTools 来调试，其实它们也是对接了 CDP，这样就可以用 Chrome DevTools 来调试它们的代码了。...Chrome DevTools 来调试也都是因为对接了 CDP。
作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试安卓手机的网页。 那 Chrome Devtools 如何远程调试安卓网页呢？...点击 inspect 就可以调试了： 可以审查元素： 可以打断点： 也可以用 Performance 分析性能： 各种调试 PC 网页的功能基本都支持。这样就可以愉快的调试安卓的移动端网页了。...而动态下载的 devtools 网页是在 google 域名下的，需要科学上网才行。 科学上网之后，就可以正常的下载 Chrome DevTools 来做调试，也就不会白屏或 404 了。...但也不是每次都要科学上网，一个调试目标只需要下载一次 Chrome Devtools 的代码，之后就可以一直用了。...这样只要实现对接 CDP 协议的 ws 服务端，就可以用 Chrome DevTools 来调试，所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js，调试 Electron
借助 Chrome DevTools，你可以拥有在浏览器中调试 JavaScript 时的所有功能。最有用的功能是检查内存的能力[5]。...除了具有 Chrome DevTools 中的许多功能外，它们还具有自己的功能，例如可以创建日志点[7]并允许你创建多个调试配置文件。...它支持本地编辑，这意味着你可以修改代码并得到调试器平台直接支持的更新逻辑。这对于进行快速迭代非常有用。w 事后调试 假设你的程序由于灾难性错误（例如内存访问错误）而崩溃。...为此你需要使用 process.abort 而不是process.exit 来关闭代码中的进程。当你使用 process.abort 时，Node 进程在退出时会生成一个核心转储文件。...为了更好地理解 llnode 可以提供的功能，这个视频演示了其一些功能[11]。 有用的 Node 模块 除了上述所有以外，还建议用第三方软件包做进一步调试。
chrome上可以设置远程调试功能，手机使用数据线连接电脑。 优缺点分析 以上这些方法在开发中都尝试过了，各有各的优缺点。...weinre安装和开启会比较繁琐，PC和手机同时调试的时候需要关注两个调试面板，效率不是很高。...，真正需要的功能是打印出手机上值。...一般开发中手机的远程调试不是强需求，除非遇到一些手机上的奇葩bug, 比如浏览器引擎对js的实现方式差异，需要打印真实数据，chrome模拟器都可以解决90%的问题。...但是每当遇到这种问题时，我还是会纠结到底使用哪个工具来做调试。原因很简单，我只是想把手机的信息打印到电脑浏览器上，不想打断PC端的调试，不想开启其他附属功能，仅此而已。
，还因为Chrome开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开Chrome，是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。...3、使用 Chrome 开发者工具调试 设置(条件)断点 与 Java 调试类似，Chrome 开发者工具提供了断点设置、删除与断点存储等基本功能。...可见 Chrome 开发者工具提供的这一功能，大大提供了开发者调试脚本的效果。 需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源文件。...该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。 需要注意的是，当在控制台中输入的方法名字不带括号时，控制台输出的是该方法所包含的代码信息，而并不是运行结果。...写在最后 我们借助 Chrome 开发者工具的支持，可以提高网页应用程序开发与调试的效率。想了解更多，请参考资料Chrome Developer Tools 官方文档
因为 VSCode 不是 JS 专用编辑器呀，它可能用来调试 Python 代码、Rust 代码等等，自然不能和某一种语言的调试协议深度耦合，所以多了一个适配器层。...VSCode Debugger 的 UI 的部分算是 frontend，而调试的目标语言算是 backend 部分，中间也是通过 WebSocket 传递调试协议。...这就是 Chrome 插件的大概架构。 Vue DevTools 和 React DevTools 就是基于这个架构来实现的调试功能。...DevTools Page 根据拿到的数据，渲染组件的信息，实现交互功能。...明显不是，CDP 协议用来调试 DOM、JS 等挺不错的，但是不好扩展，如果有别的需求，一般都是自定义调试协议。
即使是在今天，有些时候我也会这样做：打一个 console.log，然后看看结果是不是和预期的一样。如果不是和预期一样，就修改一下代码，刷新一下浏览器。...它可以在调度代码的时候，我们可以边实现功能。 后来，我才醒悟到在前端领域，这是基本的调试功能，在 Chrome、Safari 这些现代的浏览器上都能这样做。...而当我们需要做一些设备相关的逻辑时，我们还需要使用真机来进行调试。 真机调试：Device Inspect 过去的很长一段时间里，我一直都不需要真机调试这种功能——因为只是进行响应式设计。...于是，我们需要： 判断设备是不是 Android 设备 判断按下的是设备上的返回键，而不是浏览器上的返回 如果是设备上的返回键，则进行特殊处理，避免用户退出应用 这时我们就需要连接上真机，并在浏览器上打开...小结 在这一章里介绍了使用 Chrome 浏览器来调试的工具，这些在前端工程师的日常开发中非常有用。 除此，在 Chrome 浏览器里还有一些额外的功能可以使用。
它的调试工具也是需要显示 DOM 树的信息的，但是因为并不是网页，所以不能直接用 Chrome DevTools。 那如何用 Chrome DevTools 来调试跨端引擎呢？...比如 WebSocket 时的通信实现是这样的： 而 electron 环境下是这样的： 嵌入到一个环境的时候是这样的： 这也是为什么文章最开始我说 Chrome DevTools 和 Chrome...那基于这些功能，怎么实现一个自定义调试工具呢？ 调试工具主要是 frontend、backend，再就是通信协议。...再回头看下 CDP： 调试工具我们知道怎么实现了，那 CDP 只能用来调试么？ 也不是，其实也可以起到远程控制的作用。...我们可以集成 chrome devtools frontend 的代码，对接自己实现的 backend，从而实现调试的功能。跨端引擎的调试就是这样实现的。
一个专为手机网页前端设计的调试面板 引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的，既然有问题，那就也就有调试，说到调试工具，大家可能对于fiddler、Charles、chrome...Eruda 是一个专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版（没有chrome强大 这个是可以肯定的），其主要功能包括：捕获 console 日志、检查元素状态、...虽说日常的移动端开发时，一般都是在用Chrome DevTools浏览器的移动端模式模拟各种手机型号来进行开发和调试，确保功能/页面展示等都没有问题了，才会提交测试； 但是前面都讲了，只是模拟、模拟...- 这里小，不是指它的包小啊，知道它的同学都知道，其实它的包并不小（约100kb gzip）； - 100kb不小了，用形容妹子的话来说就是：丰满，直接说它胖，你就死定了； - 这里的小而美是指小巧功能也强大...小而美 那叫丰满 功能清单 console - console 的作用就不用废话了，大家都懂； - 早期在console诞生之前，我们的调试功能都是alert过多，包括现在的移动端，在手机上我们想看到参数值
动态插入代码当然可以使用chrome的live edit功能。当时我们希望有一个不直接修改代码的方式。此时你或许会想，那就设置一个断点操作吧。...JavaScript如何设置断点操作 前端的童鞋们一定知道，JavaScript的调试大部分都是在浏览器里面操作的，而这个浏览器，大部分时候是Chrome。因为Chrome的调试功能强大而方便。...然而让大家失望的是，chrome根本就没有设置断点操作的功能啊，自然其他浏览器也没有。相信你此时的心情是这样的： 没T你说个XX。 看官们不要着急，且听我们慢慢道来。...在Chrome断点调试的时候，可以使用条件断点，所谓条件断点，指定一个条件，在符合这个条件的时候。执行会停止在断点处，否则执行直接往下执行。...其实可以在前端的页面，通过这种方式，强制改变某些值，使得bug复现，而不依赖于后台的值。比如： ?
在本文中，我将介绍如何利用Chrome控制台中的快捷工具来加速网络应用的调试工作。例如，当你需要快速获取DOM检视器中选中的元素时，你可以使用这些快捷工具，而不是进行繁琐的鼠标点击或长代码输入。...JQuery库以其简洁的语法和强大的功能而广受欢迎，它使用CSS选择器来选择DOM元素，相较于传统的Web API，JQuery提供了更加高效的方式。...断点和DOM检查 在现代Web应用的调试过程中，断点和DOM检查是两种关键技术。断点帮助你调试JavaScript代码，而DOM检查则助你分析HTML并改进基于CSS的样式。...$_ 变量 Chrome控制台中的快捷变量和函数是调试网页应用时的强大工具。它们提供了快速访问和操作DOM元素、复制数据到剪贴板等功能，从而极大地提高了开发者的生产效率。...通过本文，前端初学者不仅能够提升自己的调试技巧，还能更深入地了解Chrome作为开发工具的强大功能，从而更加自信地应对开发中的各种挑战。
上篇向大家介绍完了基础功能篇，这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。...通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。...本篇文章讲会介绍Sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到Sources面板中: ?...Sources功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。...在下一篇中我将向大家介绍Chrome开发工具中的性能方面的调试。
读书破万卷，下笔如有神，但是在编程领域似乎破万卷也得通过不断地调试，找出程序存在的问题，完善程序功能 为方便开发维护人员调试，很多程序提供了远程调试功能，远程调试，例如 Nodejs 、Chromium...等，今天这篇文章我们就要利用这个功能来为帮助我们解决攻击过程中的问题 0x02 远程调试演示 以 Chrome 为例，Chrome 开启远程调试 chrome --remote-debugging-port...此时可以在每个 tab 下执行 inspect 等操作 可以点击上方 + 号查看更多功能 基本和本地浏览器调试工具没有区别，非常人性化 0x03 远程调试利用思路 从上面演示可以看到，远程调试似乎是在本地监听指定端口...浏览任意网页 我发现调试功能太健全了，不仅可以修改 URL 地址，还可以直接与网页进行交互 是否可以用来下载呢？...http://mirrors.dc.clear.net.ar/ubuntu-releases/" 我们使用上面的代码对内网 10.211.55.0/24 的 80 端口进行探测 由于报错是浏览器产生的，而不是代码
[一个专为手机网页前端设计的神器] 引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的，既然有问题，那就也就有调试，说到调试工具，大家可能对于fiddler、Charles、chrome...devtools、Firebug、还有Safari远程调试等比较熟悉，甚至有些是我可能也没有用过的； 这里喷一句吧，谁都别给我提IE啊，IE那个不叫调试工具，那叫坑爹神器，话说最近不是又甩锅了，把自己的革命老根据地都甩了...Eruda 是一个专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版（没有chrome强大 这个是可以肯定的），其主要功能包括：捕获 console 日志、检查元素状态、...虽说日常的移动端开发时，一般都是在用Chrome DevTools浏览器的移动端模式模拟各种手机型号来进行开发和调试，确保功能/页面展示等都没有问题了，才会提交测试； 但是前面都讲了，只是模拟、模拟...这里小，不是指它的包小啊，知道它的同学都知道，其实它的包并不小（约100kb gzip）； 100kb不小了，用形容妹子的话来说就是：丰满，直接说它胖，你就死定了； 这里的小而美是指小巧功能也强大，界面也好看
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
