Czy istnieje sposób na zapisanie zmian css/js zdalnego zasobu między odświeżeniami strony lub mapowanie zdalnego zasobu na lokalny w devtools?

Question

Wiem o obszarach roboczych ostatnio wprowadzonych w DevTools, ale to nie jest to, czego potrzebuję. Na przykład: strona używa jquery ładowanej z CDN, modyfikuję kod biblioteki jquery, wciskam ctrl-s, przeładowuję stronę -> modyfikacje są tracone. Albo chcę debugować jakąś stronę, ale nie mam możliwości zmiany plików.

Nie chcę, aby tylko zapisywać zmiany, jak w save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory, chcę, aby przetrwały między odświeżeniami strony.

Answer 1

Macie większość, ale tutaj jest nieznaczna zmiana:

Dokonaj zmian w panelu Style (lub w źródłach), a następnie kliknąć na źródeł, a gdy zmodyfikowany plik jest otwarty, uderzył ctrl -s.

Następnie można kliknąć prawym przyciskiem myszy zasób na liście Źródła i nacisnąć Zapisz jako ... i zapisać nowy zmodyfikowany plik na dysku.

Nie ma sposobu, aby zapisać zmodyfikowany plik zdalny bez utrzymującego go na dysku i oczekiwać, iż zostanie zmieniony na przeładowanie.

Answer 2

O ile wiem, nie można tego zrobić w programie narzędziowym Chrome. Powinieneś przejrzeć dokumentację o saving i making local changes. Jedyne, co wydaje się utrzymywać przez przeładowania, to snippets ... ale nie wygląda na to, że tego chcesz.

Jeśli kiedykolwiek znajdzie się rozwiązanie tego problemu ... Chcę tego. Na razie wydaje się, że najlepiej jest pisać skrypty i tym podobne.

Answer 3

Nie wiem, czy to kwalifikuje się jako odpowiedź, ale to, co robię, i im bliżej, że dostałem to, co chcesz.

Załaduję stronę w przeglądarce, a robię zapisz jako w pliku lokalnym. Zwróć uwagę, że zapisuję całą stronę przy pomocy HTML, js i CSS.

Teraz, jeśli chcę zmodyfikować CSS, edytuję HTML i kieruję ten plik (lub pliki) do moich plików programistycznych.

Załaduję ponownie stronę, a teraz mogę pracować, jak chcesz (zapisując i ponownie wczytując to, co zapisałem).

Oczywiście oznacza to, że masz pełny dostęp do plików i najprawdopodobniej są one lokalne, ale nie sądzę, że naprawdę chcesz edytować prawdziwe pliki internetowe.

Po zakończeniu modyfikacji plików, chodzi tylko o synchronizację moich plików dev z plikami sieciowymi.

Answer 4

Jest to możliwe, ale dość trudne:

• otwartych zasobów i prawo Clik do folderu ze stylami \ Resources (fo nie zapomnij kliknąć „allow” w oknie dialogowym, które się pojawi poniżej paska adress)
• następnie kliknij prawym przyciskiem myszy zasób betonu i wybierz „zapisz jako” (zapisz go do katalogu roboczego, który został określony w kroku poprz)
• następnie kliknij prawym przyciskiem na ten sam zasób i wybierz „Mapa do systemu plików Zasób "(wri tak samo jak w poprzednim. krok, na przykład all.css ale nie all.css? id = 234234234, na wszelki wypadek)
• zmodyfikuj style w narzędziach programistycznych.
• odświeżyć stronę (i uświadomić sobie, że wszystko, co nie modyfikacje zastosowane)
• otwartych zasobów, znajdź folder obszaru roboczego i Twojego zasobu w nim (np all.css)
• prawym przyciskiem myszy na tego zasobu oraz wybierz „lokalne modyfikacje”
• w otwartej konsoli kliknięcie na „stosuje oryginalną zawartość” i uświadomić sobie, że ty style została zastosowana =) to zakończyć się trudną drogę i lepszym pomysłem jest użycie czegoś podobnego Skrzypek zastąpić zasoby lokalne akta.

Answer 5

Tylko wskazówka pod Firefoxem używam Greasemonkey. Nie wiem, czy znasz to narzędzie, ale pozwala ono uruchamiać skrypty javascript na stronie internetowej dla strony internetowej. Następnie za pomocą dostosowanego javascript można dynamicznie zmieniać css.

Trochę zacząć dla Greasemonkey: http://www.webmonkey.com/2010/02/get_started_with_greasemonkey/

Dla chrom jest tampermonkey: http://tampermonkey.net/faq.php

Answer 6

Workspaces pozwala na edycję plików odwzorowanych do lokalnego katalogu - ale oczywiście warunkiem wstępnym jest serwowanie plików lokalnych.

Jeśli grasz z plikami, do których nie masz bezpośredniego/wygodnego dostępu (z jakiegokolwiek powodu), zalecamy skonfigurowanie serwera proxy, takiego jak Burp. W skrócie, można uzyskać modify the server response i wykonać wyszukiwanie w locie i zastąpić jak cdn.example.com/jquery-library.js na localhost:8080/jquery-library.js w treści html. Wszystko, co musisz zrobić później, to skonfigurować serwer lokalny (trywialny) i edytować lokalną instancję skryptu!

Jest to poręczny wzorzec służący do podglądu zmian lokalnych względem zawartości produkcyjnej, o ile nie jest używany zamiast środowiska testowego.

Answer 7

Można spróbować ten sposób (jQuery):

-load na stronę po raz pierwszy i na karcie źródeł umieścić punkt przerwania na linii numer 1 -Potem przeładować stronę zmodyfikować plik i zapisać (ty widać, że strona została wstrzymana ze względu na punkt przerwania) -wybierz przycisk odtwarzania, a strona zacznie się ładować. Wprowadzone modyfikacje będą działać. Wadą tego rozwiązania jest to, że po ponownym odświeżeniu strony modyfikacje zostaną utracone.

Nadzieję, że pomaga!

Answer 8

Note Wykorzystuje bibliotekę jQuery (nie wymagane)

spróbować na console

function restyle() { 
    $("*").css("color", "blue"); /* development elements, css, js */ 
    $("head").append("<script>console.log(\"restyle\")</script>"); /* js */ 
    var t = document.querySelectorAll("*"); /* modified document */ 
    var outer = document.documentElement.outerHTML; /* modified document */ 
    var inner = document.documentElement.innerHTML; /* modified document */ 
    return $.ajax() /* `pseudo` `reload` */ 
    .done(function(data) { /* original document */ 
    document.documentElement.innerHTML = outer; /* `psuudo` `document` `reload` */ 
    console.log(data, inner, outer, $(t)) /* options, `callbacks` */ 
    /* $.each($(t), function(index, value) { console.log(value) }); */ 
    }) 
}; 
restyle(); 

Answer 9

używam apache w trybie debugowania z Eclipse więc cahnges są odzwierciedlone na miejscu jak najszybciej zapisać Strona.

Answer 10

Zobacz https://stackoverflow.com/a/31585725/52817:

Resource Override rozszerzenie pozwala zrobić dokładnie to:

• utworzyć regułę pliku adresu URL, który chcesz zastąpić
• Edycja js/css/itd. w rozszerzeniu
• ładuj tak często, jak chcesz :)

Możesz nawet dodać zakładkę do narzędzi programistycznych.