小编Car*_*lea的帖子

如何使用开发人员工具查找Chrome中按钮/元素运行的代码

我正在使用Chrome和我自己的网站.

我从里面知道的:

1)我有一个表单,人们通过单击此橙色图像按钮注册:

在此输入图像描述

2)我检查它,这就是它的全部: <img class="formSend" src="images/botoninscribirse2.png">

3)在源代码的顶部,有大量的脚本源.当然,我知道按钮调用了哪一个,我编写了它:<script src="js/jquery2.js" type="text/javascript"></script>

4)在该文件中,您可以找到:$(".formSend").click(function() { ... });按钮触发的内容(进行相当复杂的表单验证和提交),我想要的是能够在任何网站上使用chrome dev工具找到它.

我们怎样才能找出元素所在的位置?


听众标签对我不起作用

那么我试着查看点击事件监听器,这对我来说似乎是一个安全的赌注但是...那里没有jquery2.js(我不知道代码是哪个文件所以我浪费时间检查所有这些... .):

在此输入图像描述

$(".formSend").click(function() { ... });jquery2.js文件中的功能不存在.

杰西在他的回答中解释了为什么 :

"最后,你的函数没有直接绑定到click事件处理程序的原因是因为jQuery返回一个被绑定的函数.jQuery的函数依次通过一些抽象层和检查,在那里的某个地方,它执行你的函数."

编辑:我已经按照你们中的一些人的建议,在下面的一个答案中收集了这个问题产生的所有方法.

javascript jquery google-chrome google-chrome-devtools

284
推荐指数
4
解决办法
14万
查看次数

纯javascript来检查是否有东西悬停(没有设置鼠标悬停/输出)

我见过这个jQuery语法:

if($(element).is(':hover')) { do something}
Run Code Online (Sandbox Code Playgroud)

由于我不使用jQuery,我正在寻找在纯JavaScript中执行此操作的最佳方法.

我知道我可以保持一个全局变量,设置/它通过取消设置mouseovermouseout,但我不知道是否有某种方式通过DOM,而不是检查元素的本地属性?也许是这样的:

if(element.style.className.hovered === true) {do something}
Run Code Online (Sandbox Code Playgroud)

此外,它必须是跨浏览器兼容的.

javascript jquery hover

43
推荐指数
4
解决办法
4万
查看次数

我应该提交.gitignore文件吗?

这似乎是最愚蠢的问题,最明显的答案.直到现在,这对我来说都是如此.但是......在阅读 了GitHub帮助的相应部分后,我完全迷失了.它说:

此文件可以提交到存储库,从而与克隆存储库的任何其他用户共享规则列表.

到目前为止,每个人,我一直在谈论Git告诉我,该.gitingore文件必须被提交,否则它的规则将无效!每个Git-newbie的问题:" 为什么.gitignore规则不适用?" 可以简单地回答:" 你承诺了吗?"

现在,GitHub帮助说,这个文件可以提交,但没有必要...

git github

25
推荐指数
1
解决办法
2万
查看次数

按下ENTER键时禁用Textarea中的新行

我打电话的功能,每当有人按entertextarea.现在我要禁用new linebreak何时enter按下.

所以new line当按下shift+ 时应该工作enter.在这种情况下,应该调用该函数.

这是jsfiddle演示:http: //jsfiddle.net/bxAe2/14/

textarea newline enter shift

20
推荐指数
2
解决办法
4万
查看次数

node_modules 文件夹太大

我使用 Gulp 已经有一段时间了,要么我没有注意到它从一开始就占用了这么多空间,要么大小一直在增长。

我只将它用于非常正常的前端工作。例如,这是我的请求部分gulpfile.js

var gulp         = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync  = require('browser-sync'),
    concat       = require('gulp-concat'),
    copy         = require('gulp-copy'),
    del          = require('del'),
    htmlmin      = require('gulp-htmlmin'),
    merge        = require('merge-stream'),
    streamqueue  = require('streamqueue'),
    cleancss     = require('gulp-clean-css'),
    gulpif       = require('gulp-if'),
    newer        = require('gulp-newer'),
    imgmin       = require('gulp-imagemin'),
    plumber      = require('gulp-plumber'),
    postcss      = require('gulp-postcss'),
    order        = require('gulp-order'),
    rename       = require('gulp-rename'),
    runSequence  = require('run-sequence'),
    sass         = require('gulp-sass'),
    sourcemaps   = require('gulp-sourcemaps'),
    uglify       = require('gulp-uglify'),
    uncss        = require('gulp-uncss');
Run Code Online (Sandbox Code Playgroud)

现在,根据du -sh,node_modules 重 2.2GB,我认为这太多了。我想更深入地挖掘,所以我查看了所有根模块:

DaisyDisk 看一个普通的 node_modules/ 文件夹


我在这里可能很天真,但我只是期待一些 …

javascript node-modules gulp package.json

18
推荐指数
1
解决办法
7094
查看次数

鼠标移动块'transitionend'

介绍

我正在使用Semantic-UI的侧边栏功能,它为您提供了一个按钮,可以触发从左侧推送内容的侧边栏(在本例中).

我想通过鼠标悬停在左侧展开相同的侧边栏.我意识到有几种方法可以做到这一点(正如这些经常做的那样.也许只是检查鼠标的X位置会起作用,但这不是重点); 我选择在左侧创建一个透明div并使其:hover伪类触发侧边栏:

// create sidebar and attach to menu open
$('.ui.sidebar').sidebar('attach events', '.toc.item');
// hover transparent div to trigger the sidebar too:
$('.sidebar-trigger').hover(function() {
    $('.ui.sidebar').sidebar('show')
});
// hide() and show() the sidebar accordingly to use the sidebar:
$('.ui.sidebar').sidebar('setting', {
    onShow: function() {
        $('.sidebar-trigger').hide();
    },
    onHidden: function() {
        $('.sidebar-trigger').show();
    }
});
Run Code Online (Sandbox Code Playgroud)

问题

现在,除了一种情况之外它都可以工作:当侧边栏打开时你不停止移动鼠标.我看了看,$(document).on('transitionend', function(event) { ... }那只鼠标有效地阻止了过渡完成.

资源

我把蓝色背景放在我的身上.sidebar-trigger并制作了一个小视频/ gif以便更清晰.

视频/ GIF

我像一个疯狂的生物一样移动了鼠标,但是用自然的手势也会出现问题.

我在这个东西上使用Semantic-UI的指南:http://semantic-ui.com/modules/sidebar.html#/settings(我也试过onVisible和onHide没有运气)

这是运行Chrome 45.0.2454.101(64位)OSX Yosemite 10.10.3

jsfiddle手头的问题

PS:看来 …

html javascript css jquery css3

12
推荐指数
1
解决办法
386
查看次数

VSCode:文件太大,无法进行标记化/格式化

我有一个 800kb *.json 文件,全部压缩为一行。

内置的 JSON 格式化程序似乎拒绝格式化和标记文件,经过一段时间的搜索后我没有找到任何解决方案。我怎样才能做到这一点?

formatting json filesize visual-studio-code

12
推荐指数
1
解决办法
2万
查看次数

Genymotion模拟器无法启动.永远停留在"android"黑色bg屏幕上

这是一个全新的安装,第一次尝试使用它,它只是不起作用.这就是我所能看到的,CPU风扇始终快速旋转:

在此输入图像描述

我想看看那个小黑色显示器预览大看这些字母,它们都是这样的:

在此输入图像描述

这些是我在日志中可以看到的一些错误:

jul 21 09:46:53 [Genymotion] [Debug] Searching virtual device with same name 
jul 21 09:46:53 [Genymotion] [ERROR] VBoxManage ("showvminfo", "Google Galaxy Nexus - 4.3 - API 18 - 720x1280") returns 1 
jul 21 09:46:53 [Genymotion] [Error] Output command: "VBoxManage.exe: error: Could not find a registered machine named 'Google Galaxy Nexus - 4.3 - API 18 - 720x1280'
VBoxManage.exe: error: Details: code VBOX_E_OBJECT_NOT_FOUND (0x80bb0001), component VirtualBox, interface IVirtualBox, callee IUnknown
VBoxManage.exe: error: Context: "FindMachine(Bstr(VMNameOrUuid).raw(), machine.asOutParam())" at line 2495 of …
Run Code Online (Sandbox Code Playgroud)

android android-emulator xamarin genymotion

10
推荐指数
1
解决办法
7746
查看次数

在 Chrome 中调试不起作用时避免使用不相关的文件

在 Chrome 中调试时,我想避免跳过内容脚本和库,因此我根据文档在首选项中启用了忽略此类文件,但它似乎不起作用。

我尝试过模式、“忽略内容脚本”复选框、右键单击文件等。奇怪的是,它显示了我不想浏览的所有文件,并显示该文件位于忽略列表中的消息:

在此输入图像描述

如何有效地忽略这些?

javascript google-chrome google-chrome-devtools

9
推荐指数
1
解决办法
303
查看次数

Visual Studio 命令面板不存在

我想在 Visual Studio 中使用 Angular。我目前有 Visual Studio 2017。

我需要使用命令面板安装一些东西,但 Visual Studio 中没有命令面板。我使用了 ctrl+shift+p 或 ctrl+p 组合,然后什么也没发生。我还检查了查看部分,没有集成的命令行部分或其他任何内容。

c# visual-studio angular

5
推荐指数
2
解决办法
4506
查看次数

如何使用 Tampermonkey 覆盖站点的变量?

我正在尝试覆盖网站 ( ) 设置的功能window.jsl.dh。这是声明:

\n
window.jsl = window.jsl || {};\nwindow.jsl.dh = window.jsl.dh || function(i, c, d) { blabla }\n
Run Code Online (Sandbox Code Playgroud)\n

我想分配dh一个无用的函数,但在敲了我的头一段时间后,我不知道什么是真实的了。我尝试过创建一个假的dh()and Object.freeze(window.jsl),使用代理,添加设置器,为我的笔记本电脑加油......没有运气。 \n无论我做什么,那段代码似乎都可以不受阻碍地运行,并且dh()函数总是被分配并运行而无需问题。

\n

这是代码:

\n
  window.jsl = window.jsl || {};\n  window.jsl.dh = function () {\n    console.log('Called the dud');\n  };\n  Object.freeze(window.jsl);\n
Run Code Online (Sandbox Code Playgroud)\n

如果我在TM脚本运行之后、站点声明之前设置断点,并在控制台中手动输入相同的代码,它就会起作用。

\n

认为这可能是一个沙箱问题,我弄乱了@grant阳光下的每个脚本注入方法 \xe2\x80\x94also 与@run-at.

\n

不明白为什么它不能单独工作,我已经没有想法了。

\n

javascript google-chrome google-chrome-devtools tampermonkey

5
推荐指数
1
解决办法
1610
查看次数

Phpstorm不知道如何运行Wordpress

我已经尝试了所有我在这里找到的和google搜索.包括路径,外部库,解释器设置......

每当我尝试运行我的主题index.php文件时:

C:\XAMPP\php\php.exe "C:\path\to\project\wp-content\themes\MYTHEME\index.php"

Fatal error: Call to undefined function get_header() in C:\path\to\project\wp-content\themes\MYTHEME\index.php on line 1

Process finished with exit code 255
Run Code Online (Sandbox Code Playgroud)

所以在第1行是的,我只是在调用我的标题.

原来它试图index.php像独立文件一样运行,但忽略了整个Wordpress安装(我从不同的角度包括).当然它在哪里get_header(),因为我可以控制点击它,它会把我带到它声明的文件,没有问题.

它也正确检测XAMP的PHP解释器.

如果我只是访问在浏览器中键入我的localhost URL的站点,它也可以正常工作.它不会通过Phpstorm工作.

php wordpress wordpress-theming phpstorm

-6
推荐指数
1
解决办法
947
查看次数