Как правильно проверить jquery и javascript с помощью инструментов веб-разработчика?
Я пытаюсь использовать инструменты веб-разработки для проверки java-скрипта на веб-страницах, но мне трудно понять, какие разделы сайта используют JS.
Это не похоже на CSS или HTML, где вы можете увидеть в каждом разделе, что сайт использует эти языки.
Когда мне удается найти какой-либо JS, я пытаюсь удалить некоторые из них, но, похоже, это не влияет на функциональность сайта (не так, как при изменении CSS или HTML).
Существуют ли простые способы обнаружения, извлечения, тестирования и оценки java script сайта, а также для просмотра того, какой раздел сайта использует определенный скрипт?
Вот конкретный пример:
Есть сайт с библиотекой jquery под названием jquery.parallax: 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));
Когда я изменяю и удаляю java script, функциональность параллакса не исчезает! Так какую роль этот конкретный java script играет на изображении, если он все еще полностью функционален без javaccript?
1 ответ
Есть простые способы увидеть, какие скрипты присутствуют на странице. Вкладка источников в отладчике Chrome покажет вам все скрипты, которые в данный момент загружены в данный документ. Помимо просмотра сценариев, остальная часть того, что вы просите, недоступна простым и автоматическим способом. Понимание того, что делают сценарии или какие сценарии влияют на часть страницы, потребует изучения, понимания сценариев, возможно, некоторых точек останова и отладки для отслеживания потока программы и т. Д.
Я пытаюсь использовать инструменты веб-разработки для проверки java-скрипта на веб-страницах, но мне трудно понять, какие разделы сайта используют JS.
Да, понимание того, что JS делает на странице, не простой процесс. Вы должны изучить код, чтобы полностью понять его. Если скрипты большие, распространены или используют незнакомые библиотеки, это может быть довольно трудоемким делом. Это в конечном итоге выполнимо, но это не задача новичка, и хотя вы можете использовать такие инструменты, как отладчики, нет инструментов, которые предоставляют вам автоматические ответы.
Это не похоже на CSS или HTML, где вы можете увидеть в каждом разделе, что сайт использует эти языки.
Правильно, это не так. Javascript - это полноценный язык программирования, который сильно отличается от CSS и HTML.
Когда мне удается найти какой-либо JS, я пытаюсь удалить некоторые из них, но, похоже, это не влияет на функциональность сайта (не так, как при изменении CSS или HTML).
Правильно, Javascript не работает так же, как CSS или HTML, и существуют ограничения в том, как много может быть выполнено динамического изменения / перезагрузки Javascript, и в некоторых ситуациях (например, в реальном времени), когда вы не можете сделать это вообще без реинициализация страницы с нуля. Помните, у Javascript есть состояние реального времени выполнения, которое является продуктом всего кода, который до сих пор выполнялся. Вы не можете просто заменить код новым кодом и сохранить свое состояние.
Однако вы можете установить точки останова в существующем коде, а когда отладчик останавливается на одной из этих точек останова, вы можете проверить все переменные в области видимости и даже изменить значения этих переменных. Вы также можете выполнить свой собственный код в консоли, остановившись на точке останова.
Существуют ли простые способы обнаружения, извлечения, тестирования и оценки java script сайта, а также для просмотра того, какой раздел сайта использует определенный скрипт?
Как было объяснено выше, существуют относительно простые способы проверки кода различных сценариев, активных на странице. Помимо этого, нет простых способов сделать что-то из того, о чем вы просите. Они включают в себя тяжелую работу по изучению сценариев и понимания того, что они делают и как они это делают.
Ваш вопрос очень общий, и вы не указали какую-либо конкретную вещь, которую пытаетесь диагностировать или понять. Это делает ваш вопрос довольно открытым и труднее давать конкретные советы. Если, например, вы хотите узнать, какой код выполняется при нажатии кнопки, существуют методы, которые можно использовать, чтобы попытаться найти код, который запускается при нажатии кнопки. Например, большинство отладчиков показывают список обработчиков событий, которые присоединены к определенному элементу DOM. Это может позволить вам найти код, который запускается при возникновении этих событий. Затем вы можете изучить этот код, чтобы выяснить, что он делает.
Но даже это не обязательно просто, потому что DOM поддерживает распространение событий и делегирование событий, поэтому обработчики событий для данного элемента DOM могут быть присоединены к родительскому объекту, а не обязательно к реальному объекту. И, если код использует какую-либо библиотеку (например, jQuery), код обработки событий, скорее всего, будет некой универсальной функцией обработки событий, а не кодом, который вы хотите увидеть, и может потребоваться значительно больше усилий, чтобы выяснить, какой код вызывается универсальный обработчик событий.
В конечном счете, специалист в области отладки Javascript и Javascript и DOM может в конечном итоге выяснить все, что делает код на странице, но это может занять много времени и некоторое обучение, как это сделать. Это приобретенный навык, который усваивается часами, часами и часами практики и пытается понять и понять код других людей.