我正在尝试使用网络开发工具来检查网页上的 java 脚本，但我发现很难看到网站的哪些部分正在使用 JS。
它不像 CSS 或 HTML，您可以在其中看到网站使用这些语言的每个部分。
当我设法找到任何 JS 时，我尝试删除其中的一些，但它似乎并没有改变网站的功能(不像你更改 CSS 或 HTML 时那样。)
是否有任何简单的方法来检测、提取、测试和评估站点的 javascript，以及查看站点的哪个部分正在使用特定脚本？
这是一个具体的例子:
有一个名为 jquery.parallax 的带有 jquery 库的站点:http://stephband.info/jparallax/
当您检查图像的 html 和 css 时，您会得到:
<div class="parallax-viewport" id="parallax">
<!-- parallax layers -->
<div class="parallax-layer" style="width: 860px; height: 273px; top: 77.08854166666667%; margin-top: -210.45171875px; left: 0%; margin-left: 0px;">
<img src="images/parallax_sketch/0_sun.png" alt="" style="position:absolute; left:300px; top:-12px;">
</div>
<div class="parallax-layer" style="width: 920px; height: 274px; top: 77.08854166666667%; margin-top: -211.22260416666666px; left: 0%; margin-left: 0px;">
<img src="images/parallax_sketch/1_mountains.png" alt="">
</div>
<div class="parallax-layer" style="width: 1100px; height: 284px; top: 77.08854166666667%; margin-top: -218.93145833333332px; left: 0%; margin-left: 0px;">
<img src="images/parallax_sketch/2_hill.png" alt="" style="position:absolute; top:40px; left:0;">
</div>
<div class="parallax-layer" style="width: 1360px; height: 320px; top: 77.08854166666667%; margin-top: -246.68333333333334px; left: 0%; margin-left: 0px;">
<img src="images/parallax_sketch/3_wood.png" alt="" style="position:absolute; top:96px; left:0;">
</div>
<!-- Rounded corners -->
<img src="http://stephband.info/images/corner_white_tl.png" class="tl">
<img src="http://stephband.info/images/corner_white_tr.png" class="tr">
<img src="http://stephband.info/images/corner_white_bl.png" class="bl">
<img src="http://stephband.info/images/corner_white_br.png" class="br">
</div
**OK, now there is a specific jquery file that controls the parallax function:**
// jquery.jparallax.js
// 1.0
// Stephen Band
//
// Project and documentation site:
// webdev.stephband.info/jparallax/
//
// Repository:
// github.com/stephband/jparallax
//
// Dependencies:
// jquery.event.frame
// webdev.stephband.info/events/frame/
(function(jQuery, undefined) {
// Plugin name
var plugin = "parallax";
// VAR
var options = {
mouseport: 'body', // jQuery object or selector of DOM node to use as mouse detector
xparallax: true, // boolean | 0-1 | 'npx' | 'n%' - Sets axis of reaction and by how much they react
yparallax: true, //
xorigin: 0.5, // 0-1 - Sets default alignment. Only has effect when parallax values are something other than 1 (or true, or '100%')
yorigin: 0.5, //
decay: 0.66, // 0-1 (0 instant, 1 forever) - Sets rate of decay curve for catching up with target mouse position
frameDuration: 30, // Int (milliseconds)
freezeClass: 'freeze' // String - Class added to layer when frozen
},
value = {
left: 0,
top: 0,
middle: 0.5,
center: 0.5,
right: 1,
bottom: 1
},
regex = {
px: /^\d+\s?px$/,
percent: /^\d+\s?%$/
},
frameEvent = 'frame.'+plugin,
abs = Math.abs,
pointer = [0, 0];
// FUNCTIONS
function parseValue(value) { return this.lib[value]; }
parseValue.lib = value;
// Converts numbers or numbers in strings to boolean
function parseBool(x) {
return typeof x === "boolean" ? x : !!( parseFloat(x) ) ;
}
function parseCoord(x) {
return (regex.percent.exec(x)) ? parseFloat(x)/100 : x;
}
// CONSTRUCTORS
function Mouse(xparallax, yparallax, decay, pointer){
// Convert parallax options to boolean values
var parallax = [xparallax, yparallax];
this.ontarget = false;
this.decay = decay;
this.pointer = pointer || [0.5, 0.5];
this.update = function(pointer, threshold){
var lagPointer, x;
// Pointer is already on target
if (this.ontarget) {
this.pointer = pointer;
}
// Pointer has arrived within the target thresholds
else if ((!parallax[0] || abs(pointer[0] - this.pointer[0]) < threshold[0]) &&
(!parallax[1] || abs(pointer[1] - this.pointer[1]) < threshold[1])) {
this.ontarget = true;
this.pointer = pointer;
}
// Pointer is nowhere near the target
else {
lagPointer = [];
x = 2;
while (x--) {
if ( parallax[x] ) {
lagPointer[x] = pointer[x] + this.decay * (this.pointer[x] - pointer[x]);
}
}
this.pointer = lagPointer;
}
};
}
function Port(object, options){
var self = this,
elem = object instanceof jQuery ? object : jQuery(object) ,
// Convert parallax options to boolean values
parallax = [parseBool(options.xparallax), parseBool(options.yparallax)],
// State of mouse position (0 - outside, 1 - inside, 2 - just gone outside)
inside = 0,
// Stores mouse position on mouseleave event
leaveCoords;
this.pointer = [0, 0];
this.active = false;
this.activeOutside = (options && options.activeOutside) || false;
this.update = function(coords){
var pos = this.pos,
size = this.size,
pointer = [],
x = 2;
// Is mouse inside port?
// Yes.
if ( inside > 0 ) {
// But it just went outside, so make this the last move
// Use leaveCoords stored by mouseleave event
if ( inside === 2 ) {
inside = 0;
if (leaveCoords) {
coords = leaveCoords
};
}
while (x--) {
if ( parallax[x] ) {
pointer[x] = (coords[x] - pos[x]) / size[x] ;
pointer[x] = pointer[x] < 0 ? 0 : pointer[x] > 1 ? 1 : pointer[x] ;
}
}
this.active = true;
this.pointer = pointer;
}
// No.
else {
this.active = false;
}
};
this.updateSize = function(){
var width = elem.width(),
height = elem.height();
self.size = [width, height];
self.threshold = [ 1/width, 1/height ];
};
this.updatePos = function(){
var offset = elem.offset() || {left: 0, top: 0},
left = parseInt(elem.css('borderLeftWidth')) + parseInt(elem.css('paddingLeft')),
top = parseInt(elem.css('borderTopWidth')) + parseInt(elem.css('paddingTop'));
self.pos = [offset.left + left, offset.top + top];
};
// Update mouseport dimensions on window resize
jQuery(window)
.bind('resize.'+plugin, self.updateSize)
.bind('resize.'+plugin, self.updatePos);
// Detect entry and exit of mouse
elem
.bind('mouseenter.'+plugin, function(e){
inside = 1;
})
.bind('mouseleave.'+plugin, function(e){
inside = 2;
leaveCoords = [e.pageX, e.pageY];
});
// Set up layer
this.updateSize();
this.updatePos();
}
function Layer(elem, options){
var px = [],
parallax = [],
offset = [],
position = [];
this.update = function(pointer){
var pos = [],
cssPosition,
cssMargin,
x = 2,
css = {};
while (x--) {
if ( parallax[x] ) {
pos[x] = parallax[x] * pointer[x] + offset[x];
// We're working in pixels
if ( px[x] ) {
cssPosition = position[x];
cssMargin = pos[x] * -1;
}
// We're working by ratio
else {
cssPosition = pos[x] * 100 + '%';
cssMargin = pos[x] * this.size[x] * -1;
}
// Fill in css object
if ( x === 0 ) {
css.left = cssPosition;
css.marginLeft = cssMargin;
}
else {
css.top = cssPosition;
css.marginTop = cssMargin;
}
}
}
// Set css
elem.css(css);
};
this.setParallax = function(xp, yp, xo, yo){
var p = [ xp || options.xparallax, yp || options.yparallax ],
origin = [ xo || options.xorigin, yo || options.yorigin ],
i = 2,
css = {};
while (i--) {
// Set px flag
px[i] = regex.px.test(p[i]);
// Convert origin to numbers
if (typeof origin[i] === 'string') {
origin[i] = origin[i] === undefined ? 1 :
value[ origin[i] ] || parseCoord(origin[i]) ;
}
// We're dealing with pixel dimensions
if ( px[i] ) {
// Set parallax
parallax[i] = parseInt(p[i]);
// Set offset
offset[i] = origin[i] * ( this.size[i] - parallax[i] );
// Set css position constant
position[i] = origin[i] * 100 + '%';
}
// We're dealing with ratios
else {
// Set parallax, converting to ratio where necessary
parallax[i] = p[i] === true ? 1 : parseCoord(p[i]);
// Set offset
offset[i] = parallax[i] ? origin[i] * ( 1 - parallax[i] ) : 0 ;
}
}
};
this.getPointer = function(){
var viewport = elem.offsetParent(),
pos = elem.position(),
position = [],
pointer = [],
i = 2;
// Reverse calculate ratio from layer's current position
while (i--) {
if ( px[i] ) {
// TODO: reverse calculation for pixel case
position[i] = 0;
}
else {
position[i] = pos[ i === 0 ? 'left' : 'top' ] / (viewport[ i === 0 ? 'outerWidth' : 'outerHeight' ]() - this.size[i]) ;
}
pointer[i] = (position[i] - offset[i]) / parallax[i] ;
}
return pointer;
};
this.setSize = function(x, y){
this.size = [ x || elem.outerWidth(), y || elem.outerHeight() ];
};
this.setSize(options.width, options.height);
this.setParallax(options.xparallax, options.yparallax, options.xorigin, options.yorigin);
}
// EVENT HANDLERS
function update(e){
var elem = jQuery(this),
global = e.data.global || e.data,
local = e.data.local || elem.data(plugin),
port = global.port,
mouse = global.mouse,
localmouse = local.mouse,
process = global.timeStamp !== e.timeStamp;
// Global objects have yet to be processed for this frame
if ( process ) {
// Set timeStamp to current time
global.timeStamp = e.timeStamp;
// Process mouseport
port.update(pointer);
// Process mouse
if ( port.active || !mouse.ontarget ) {
mouse.update(port.pointer, port.threshold);
}
}
// Layer has it's own mouse
if ( localmouse ) {
// Process mouse
localmouse.update( local.freeze ? local.freeze.pointer : port.pointer, port.threshold );
// If it hits target
if ( localmouse.ontarget ) {
delete local.mouse;
// Stop animating frozen layers
if (local.freeze) {
elem
.unbind(frameEvent)
.addClass(global.freezeClass);
}
}
// Use localmouse in place of mouse
mouse = localmouse;
}
// Layer is responding to global mouse
else {
// When no longer active, unbind
if ( mouse.ontarget && !port.active ) {
elem.unbind(frameEvent);
}
}
local.layer.update(mouse.pointer);
}
jQuery.fn[plugin] = function(o){
var global = jQuery.extend({}, jQuery.fn[plugin].options, o),
args = arguments,
layers = this,
optionsArray = [];
if (undefined === jQuery.event.special.frame) {
throw "jquery.parallax requires jquery.event.frame.";
}
// Turn mouseport into jQuery obj
if ( !(global.mouseport instanceof jQuery) ) {
global.mouseport = jQuery(global.mouseport);
}
global.port = new Port(global.mouseport, global);
global.mouse = new Mouse(parseBool(global.xparallax), parseBool(global.yparallax), global.decay);
global.mouseport
.bind("mouseenter", function(e){
var i = layers.length,
layer;
global.mouse.ontarget = false;
// Animate unfrozen layers
while (i--) {
layer = layers[i];
if (!jQuery.data(layer, plugin).freeze) {
jQuery.event.add(this, frameEvent, update, {
global: global,
local: optionsArray[i]
});
};
}
});
return layers.each(function(i){
var elem = jQuery(this),
// Construct layer options from extra arguments
layerOptions = args[i+1] ? jQuery.extend({}, global, args[i+1]) : global ,
// Set up layer data. Give it a local mouse
// initialises it to start smoothly from current position
layer = new Layer(elem, layerOptions),
local = {
layer: layer,
mouse: new Mouse(parseBool(layerOptions.xparallax), parseBool(layerOptions.yparallax), layerOptions.decay, layer.getPointer())
};
elem.data(plugin, local);
optionsArray.push(local);
// Bind freeze and unfreeze actions directly to layers using
// jQuery.event.add(node, type, fn, data)
jQuery.event.add(this, 'freeze', function(e){
var elem = jQuery(this),
global = e.data.global,
local = e.data.local,
mouse = local.mouse || local.freeze || global.mouse,
coords = coords = [
e.x === undefined ? mouse.pointer[0] : parseCoord(e.x),
e.y === undefined ? mouse.pointer[1] : parseCoord(e.y)
],
decay = e.decay;
// Store position
local.freeze = { pointer: coords };
// Create local mouse, passing in current pointer with options
local.mouse = new Mouse(parseBool(global.xparallax), parseBool(global.yparallax), global.decay, mouse.pointer);
if (decay !== undefined) { local.mouse.decay = decay; }
// Start animating
jQuery.event.add(this, frameEvent, update, global);
}, {
global: global,
local: local
});
jQuery.event.add( this, 'unfreeze', function(e){
var elem = jQuery(this),
global = e.data.global,
local = e.data.local,
decay = e.decay,
pointer;
if (!local.freeze) { return; }
// Create local mouse, passing local freeze pointer with options
pointer = local.mouse ? local.mouse.pointer : local.freeze.pointer ;
local.mouse = new Mouse(parseBool(global.xparallax), parseBool(global.yparallax), global);
local.mouse.pointer = pointer;
// Override decay with decay passed as e.decay
if (decay !== undefined) local.mouse.decay = decay;
// Destroy local.freeze
delete local.freeze;
// Remove freeze class and start animating
elem.removeClass(options.freezeClass);
// Start animating
jQuery.event.add(this, frameEvent, update, global);
}, {
global: global,
local: local
});
});
};
// EXPOSE
jQuery.fn[plugin].options = options;
// RUN
jQuery(document).ready(function(){
// Pick up and store mouse position on jQuery(document)
// IE does not register mousemove on jQuery(window)
jQuery(document)
.mousemove(function(e){
pointer = [e.pageX, e.pageY];
});
});
`enter code here`}(jQuery));
当我更改和删除 javascript 时，视差功能并没有消失!如果没有 javacript 仍然可以正常运行，那么这个特定的 javascript 在图像上扮演什么 Angular 色呢？
最佳答案
有一些简单的方法可以查看页面中存在哪些脚本。 Chrome 调试器中的源选项卡将显示给定文档中当前加载的所有脚本。除了查看脚本之外，您所要求的其余内容无法以简单、自动化的方式提供。了解脚本正在做什么或哪些脚本正在影响页面的一部分将涉及研究、理解脚本、可能的一些断点和调试以跟踪程序流程等...
I am trying to use web dev tools to inspect the java script on web pages, but I am finding it difficult to see which sections of a site are using JS.
是的，理解一个页面中的JS是干什么的，并不是一个简单的过程。您必须研究代码才能完全理解它。如果脚本很大或分散或使用不熟悉的库，这可能是一项相当大的工作量。它最终是可行的，但这不是初学者的任务，虽然您可以使用调试器等工具，但没有工具可以为您提供自动答案。
It is not like with CSS or HTML where you can see each section that a site uses these languages.
正确的，它不像那些。 Javascript 是一种成熟的编程语言，与 CSS 和 HTML 有很大不同。
When I do manage to find any JS, I try deleting some of it, but it does not seem to alter the functionality of the site (not like when you change the CSS or HTML.)
正确，Javascript 的工作方式与 CSS 或 HTML 不同，并且在可以完成多少动态更改/重新加载 Javascript 以及在某些情况下(例如实时闭包)您不能真正做到这一点存在限制根本不需要从头开始重新初始化页面。请记住，Javascript 具有实时运行时状态，它是迄今为止运行的所有代码的产物。您不能只用新代码替换代码并保持原来的状态。
但是，您可以在现有代码中设置断点，当调试器停在这些断点之一时，您可以检查范围内的所有变量，甚至可以修改这些变量的值。您还可以在断点处停止时在控制台中执行您自己的代码。
Are there any easy ways to detect, extract, test, and evaluate a site's javascript, and to see which section of the site is using a particular script?
正如上面所解释的，有一些相对简单的方法可以检查页面中事件的各种脚本的代码。除此之外，没有简单的方法可以完成您要求的任何其他事情。他们需要努力学习脚本并理解脚本的作用和方式。
您的问题非常笼统，您没有具体说明您要诊断或理解的任何具体内容。这使您的问题非常开放，更难提供具体建议。例如，如果您想找出按下按钮时执行的代码，可以使用一些技术来尝试查找按下按钮时运行的代码。例如，大多数调试器会显示附加到特定 DOM 元素的事件处理程序列表。这可能允许您找到在这些事件发生时运行的代码。然后您可以研究该代码以尝试弄清楚它的作用。
但是，即使那样也不一定是直截了当的，因为 DOM 支持事件传播和事件委托(delegate)，因此给定 DOM 项的事件处理程序可能附加到父对象，而不一定附加到实际对象。而且，如果代码使用任何类型的库(如 jQuery)，事件处理代码可能是一些通用的事件处理函数，而不是您想要查看的代码，并且找出哪些代码被调用可能需要更多的工作通用事件处理程序。
最终，精通 Javascript 和 Javascript 调试以及 DOM 技术的人最终可以弄清楚页面中的代码所做的一切，但这可能需要花费大量时间和一些人来学习如何做到这一点。这是一种通过数小时、数小时和数小时的实践以及试图理解和理解其他人的代码而获得的技能。
关于javascript - 如何使用 Web 开发人员工具正确检查 jquery 和 javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29790582/